【django后台】浏览器同源策略和CORS跨域（1）

一、浏览器的同源策略

同源策略是浏览器的⼀个安全功能，不同源的客户端脚本(js⽂件)在没有明确授权的情况下，不能读写对⽅资源。只有同⼀个源的脚本赋予dom、读写cookie、session、ajax等操作的权限。

url由协议、域名、端⼝和路径组成，如果两个url的协议、域名和端⼝相同，则这两个url是同源的。

举例来说：
http://www.example.com/dir/page.html
协议是 http://
域名是 www.example.com
端⼝是 80（默认端⼝可以省略）

同源政策的⽬的，是为了保证⽤户信息的安全，防⽌恶意的⽹站窃取数据。

二、跨域CORS

前端和后端分别是两个不同的端⼝
前端：127.0.0.1:8081
后端：192.168.17.129:8880

现在，前端与后端分别是不同的端⼝，这就涉及到跨域访问数据的问题，因为浏览器的同源策略，默认是不⽀持两个不同域名间相互访问数据，⽽我们需要在两个域名间相互传递数据，这时我们就要为后端添加跨域访问的⽀持。

1、使⽤django-cors-headers扩展

a、安装模块

pip install django-cors-headers

b、添加应⽤

INSTALLED_APPS = [ 
	... 
	'corsheaders', 
	...
]

c、中间件配置

MIDDLEWARE = [ 
	'corsheaders.middleware.CorsMiddleware',
	 ...
 ]

4、添加⽩名单

# 设置CORS⽩名单
CORS_ORIGIN_WHITELIST = ( 
	'http://127.0.0.1:8081',
	'http://127.0.0.1:8080', 
	'http://localhost:8080', 
	'http://www.nagle.cn:8080', 
	'http://api.nagle.cn:8083',
)

CORS_ALLOW_CREDENTIALS = True # 允许携带cookie

凡是出现在⽩名单中的域名，都可以访问后端接⼝CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否⽀持对cookie的操作。

2、跨域实现流程

1、浏览器会第⼀次先发送OPTIONS请求询问后端是否允许跨域，后端查询⽩名单中是否有这两个域名

2、如果域名在⽩名单中则在响应结果中告知浏览器允许跨域
3、浏览器第⼆次发送POST请求，携带⽤户登录数据到后端，完成登录验证操作