django - CORS

CORS 跨域问题

跨域是由于 浏览器 的 同源策略 导致的问题

请求地址的组成

例：http://www.baidu.com:80/s?keywords=图片

• http : schema，是一种协议
• www.baidu.com 是域名
• 80 : 是默认的端口，可以省略
• /s 是请求地址
• keywords=图片 请求参数

什么是同源策略？

指的是 协议相同、域名相同、端口相同

http://www.baidu.com/s
http://www.baidu.com:8000/s
https://www.baidu.com/s
http://wenku.baidu.com/s

*.baidu.com (二级域名)

跨域的解决方案

• <script> 标签的跨域
• jsonp 跨域，json 的原理就是 <script> 标签

后台返回的默认是一个 JSON 对象，如何让后台返回一个 JS 代码？

[1, 2, 3, 4]
{name:"zhansan", ...}

test([1, 2, 3, 4])
test({name:"zhansan", ...})

在页面上，定义一个 test 函数

jsonp 在使用的时候，要求后端必须支持，后端返回的不是一个标准的 JSON，
而是一个形似 javascript 函数的表示形式

CORS (Cross-Origin Resource Sharing)

通过 CORS: Cross-Origin Resource Sharing（跨站资源共享）策略，来实现跨域

解决方案：主要在后端服务器上、在响应的头信息上，添加一个 Access-Control-Allow-Origin = * 这样的头信息即可。

DRF 中如何解决跨域问题

DRF 是通过 django-cors-headers 来解决跨域的问题，在 DRF 中引入 django-cors-headers 的步骤如下：

1. pip install django-cors-headers
2. 在 INSTALLED_APPS 中，添加 "corsheaders"
3. 在 settings.py 配置文件中，middlewares 中添加中间件 corsheaders.middleware.CorsMiddleware
4. 在 settings.py 中，

   # 配置跨域的属性 
   CORS_ORIGIN_ALLOW_ALL = False 
   # 如果设置为 True，白名单失效，则允许所有的网站都可以跨域访问
   
   # 设置跨域的白名单
   CORS_ORIGIN_WHITELIST = [
      'http://www.baidu.com',
      'http://www.sina.com',
   ]
   

CORS 除了在响应的头信息上设置 Access-Control-Allow-Origin 来允许某个资源进行跨域，还可以通过 反向代理 的技术进行跨域；
在反向代理的时候，需要在代理服务器上设置 Access-Control-Allow-Origin

• <iframe> 标签跨域