has been blocked by CORS policy: NO 'Access-Control-Allow-Origin' header is present on the reauested

一、软件环境

Django + DRF
VUE

报错信息：
has been blocked by CORS policy: NO 'Access-Control-Allow-Origin' header is present on the reauested resource.

---

二、同源策略

1、浏览器的同源策略

浏览器发现ip或端口是不一样的，就会认为存在风险，会进行拦截。
除非后端告诉浏览器允许。

2、简单请求和复杂请求

HTTP方法是下列方法之一
　　HEAD， GET，POST
HTTP头信息不超出以下几种字段
　　Accept， Accept-Language， Content-Language， Last-Event-ID
　　Content-Type只能是下列类型中的一个
　　　　application/x-www-from-urlencoded
　　　　multipart/form-data
　　　　text/plain
任何一个不满足上述要求的请求，即是简单请求。
任何一个不满足，即会被认为是复杂请求~~
两者区别：复杂请求会先发出一个预请求，我们也叫预检，OPTIONS请求
预检的话，请求发出前就会被拦截。

所以drf发送json数据，就是复杂请求。

三、添加响应头解决跨域

解决思路就是告诉浏览器：不进行拦截

这里是django后端，实现如下：

Django 中间件加响应头

MIDDLEWARE = [
    ...
    'middlewares.Mycors',
]   

middlewares/Mycors.py

from django.utils.deprecation import MiddlewareMixin

class MyCors(MiddlewareMixin):
    def process_response(self, request, response):
        response["Access-Control-Allow-Origin"] = "*"
        if request.method == "OPTIONS":
            response["Access-Control-Allow-Headers"] = "Content-Type"
            response["Access-Control-Allow-Methods"] = "DELETE, PUT, POST"
        return response