Django前后端分离2——CORS跨域

一.CORS

1.同源策略
如果两个页面的协议，域名和端口完全一致，则两个页面同源。

同源策略是浏览器的一个安全功能，不同源的客户端脚本(ajax)在没有明确授权的情况下，不能读写对方资源。

2.CORS概念
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing），是跨域问题的解决方案之一。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

3.CORS特点

1. 浏览器自动完成（在请求头中加入特殊头 或 发送特殊请求）
2. 服务器需要支持（响应头中需要有特殊头）

4.跨域请求类型

1. 简单请求

• 请求方法如下：GET or HEAD or POST
• 请求头仅包含：Accept，Accept-Language，Content-Language，Content-Type
• Content-Type 仅支持如下三种：application/x-www-form-urlencoded，multipart/form-data，ext/plain

2.预检请求：不满足以上任意一点的请求都是 预检请求

前后端分离时通过json传输数据，所以content_type必然不满足简单请求的要求(application/json)，因此均为预检请求

5.跨域请求流程

1. 简单请求流程
   请求头中 携带 Origin，该字段表明自己来自哪个域
   如果请求头中的Origin在服务器接受范围内， 则返回如下头：
   如果服务器不接受此域，则响应头中不包含 Access-Control-Allow-Origin

响应头	作用	备注
Access-Control-Allow-Origin	服务器接受的域
Access-Control-Allow-Credentials	是否接受跨域的Cooike	可选
Access-Control-Expose-Headers	默认情况下，xhr只能拿到如下响应头：Cache-Control，Content-Language，Content-Type，Expires，Last-Modified；如果有需要获取其他头，需在此指定	可选

2. 预检请求流程：使用设定的请求方式请求数据之前,先发送一个OPTIONS请求,看服务端是否允许客户端发送非简单请求，只有"预检"通过后才会再发送一次请求用于数据传输

• OPTION 请求发起，携带如下请求头

请求头	作用	备注
Origin	表明此请求来自哪个域	必选
Access-Control-Request-Method	此次请求使用方法	必选
Access-Control-Request-Headers	此次请求使用的头	必选

• OPTION 接受响应阶段，携带如下响应头

响应头	作用	备注
Access-Control-Allow-Origin	同简单请求	必选
Access-Control-Allow-Methods	告诉浏览器，服务器接受得跨域请求方法	必选
Access-Control-Allow-Headers	返回所有支持的头部，当request有 ‘Access-Control-Request-Headers’时，该响应头必然回复	必选
Access-Control-Allow-Credentials	同简单请求	可选
Access-Control-Max-Age	OPTION请求缓存时间，单位s 每次预检请求都会发送OPTION和post两个请求，此设置可缓解服务器压力	可选

• 主请求阶段

请求头	作用	备注
Origin	表明此请求来自哪个域

• 主请求响应阶段

响应头	作用	备注
Access-Control-Allow-Origin	当前服务器接受得域

二.django对CORS的支持

pip install django-cors-headers

settings.py中增加如下配置

1，INSTALLED_APPS 中添加 corsheaders
2，MIDDLEWARE 中添加 corsheaders.middleware.CorsMiddleware
     位置尽量靠前，官方建议放在 ‘django.middleware.common.CommonMiddleware’ 上方
     禁掉csrf中间件
3，CORS_ORIGIN_ALLOW_ALL  布尔值  如果为True，所有域均可访问 白名单不启用
4，CORS_ORIGIN_WHITELIST =[
		"https://example.com"
	]
5, CORS_ALLOW_METHODS = (
			'DELETE',
			'GET',
			'OPTIONS',
			'PATCH',
			'POST',
			'PUT',
			)
6, CORS_ALLOW_HEADERS = (
			'accept-encoding',
			'authorization',  # 这个里面放token
			'content-type',
			'dnt',
			'origin',
			'user-agent',
			'x-csrftoken',
			'x-requested-with',
		)
7, CORS_PREFLIGHT_MAX_AGE  浏览器或者客户端可以缓存预检响应的秒数，
	如果是0或者任何假值，则再次发送请求时，还需要进行预检，默认是86400（一天）
8, CORS_EXPOSE_HEADERS  []  扩展的请求头，默认为空
9, CORS_ALLOW_CREDENTIALS  是否接收cookie，布尔值， 默认False