Django 之 跨域问题

同源策略

因为浏览器的同源策略限制，不是同源的脚本不能操作其他源下面的资源，想操作另一个源下面的资源就属于跨域了，这里说的跨域是广义跨域，我们常说的代码中请求跨域，是狭义的跨域，即在脚本代码中向非同源域发送http请求

浏览器的同源策略（SOP/same origin policy）是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS（跨站脚本攻击 cross site scripting）和CSRF（跨站请求伪造cross-site request forgery）等攻击。

同源：同源是指协议，域名，端口完全相同。

不同源：协议，域名，端口只要有一项不相同，下面的任意一种都是不同源的。

协议不同:
http://www.example.com/index.do
https://www.example.com/login.do
域名不同:
https://www.example.com/index.do
https://wow.example.com/login.do
https://www.test.com/login.do
端口不同:
http://www.example.com:80/index.do
http://www.example.com:8080/login.do

两种请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

1、请求方法是以下三种方法之一：HEAD、GET、POST
2、HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、 Last-Event-ID、Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求，浏览器对这两种请求的处理，是不一样的。

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段（详见下文），就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
Access-Control-Allow-Origin字段是每次回应都必定包含的。

参考博客 ：http://www.ruanyifeng.com/blog/2016/04/cors.html

解决跨域问题

JSONP

不仅限于python，所有的GET请求都可以使用jsonp实现跨域

使用Ajax获取json数据时，存在跨域的限制。不过，在Web页面上调用js的script脚本文件时却不受跨域的影响，JSONP就是利用这个来实现跨域的传输。因此，我们需要将Ajax调用中的dataType从JSON改为JSONP（相应的API也需要支持JSONP）格式。

JSONP只能用于GET请求。

修改响应

在响应头加上响应的允许跨域的参数，告诉浏览器当前请求被服务器接受，这种跨域方式也是通用的。

例如可以自定义中间件，在中间件中重写process_response并在response中添加允许跨域的参数。

class MyCorsMiddle(MiddlewareMixin):
    def process_response(self, request, response):
        if request.method == 'OPTIONS':
            # 允许以下请求头和请求源、请求方式
            response['Access-Control-Allow-Headers'] = 'Content-Type'
            response['Access-Control-Allow-Methods']='GET,POST'
            # 允许所有的请求头和请求源、请求方式
            # response['Access-Control-Allow-Headers'] = '*'
            # response['Access-Control-Allow-Methods'] = '*'
        response['Access-Control-Allow-Origin']='http://127.0.0.1:8000'
        # response['Access-Control-Allow-Origin'] = '*'
        return response
    
settings.py文件中配置
MIDDLEWARE = [
    'app01.MyMiddle.MyCorsMiddle',
    ... ...
]

注意：以上配置是在要被跨域访问的后端添加。

第三方模块django-cors-headers

安装django-cors-headers：

pip3 install django-cors-headers

在settings.py中增加：

# 应用中注册
INSTALLED_APPS = [
  ...
  'corsheaders',
  ...
]
...
# 中间件注册
MIDDLEWARE_CLASSES = [
  ...
  'corsheaders.middleware.CorsMiddleware',
  'django.middleware.common.CommonMiddleware',
  ...
]
记得这个中间件一定要写在CSRF之前，为了方便处理，一般写在最前面

设置CORS_ORIGIN_ALLOW_ALL = True，即允许所有的跨域请求，当然，这里也可以设置为False，然后配合 CORS_ORIGIN_WHITELIST 白名单来使用。

具体用法可以参考：https://github.com/ottoyiu/django-cors-headers