如何解决 Django 前后端分离开发的跨域问题

一、同源策略

1、先来说说什么是源

• 源（origin）就是协议、域名和端口号。
以上url中的源就是：http://www.company.com:80
若地址里面的协议、域名和端口号均相同则属于同源。
以下是相对于 http://www.a.com/test/index.html 的同源检测
• http://www.a.com/dir/page.html ----成功
• http://www.child.a.com/test/index.html ----失败，域名不同
• https://www.a.com/test/index.html ----失败，协议不同
• http://www.a.com:8080/test/index.html ----失败，端口号不同

2.什么是同源策略？

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

• 不受同源策略限制的：
1、页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2、跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

二、跨域

1、什么是跨域

受前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是就需要跨域。

2、跨域的几种实现形式

（1）设置document.domain

比如home.example.com要读取developer.example.com里面的文档，由于同源策略的限制，就无法读取，我们通过设置document.domain="example.com";这时就不再受同源策略的限制了。

（2）跨资源共享CORS（Cross-origin
resource sharing）

CORS采用新的“origin:”请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP。它允许服务器用头信息显示地列出源，或使用通配符来匹配所有的源并允许任何地址请求文件。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

从而它允许浏览器向跨源服务器，发出XMLHttpRequest请求，克服了AJAX只能同源使用的限制。

（3）跨文档消息（cross-document
messaging）

允许来自一个文档的脚本可以传递消息到另一个文档里的脚本，而不管脚本的来源是否不同，通过调用window.postMessage()方法，可以异步传递消息事件(可以使用onmessage事件处理程序函数来处理它)到窗口的文档里。

3.利用跨资源共享CORS（Cross-origin resource sharing）的Django的跨域操作

　　（1）将corsheaders注册到你的setting（项目的主配置文件中）

INSTALLED_APPS = [

        .....

       'corsheaders',

        ......

]

　　(2) 在中间件中进行设置

MIDDLEWARE = [

    'corsheaders.middleware.CorsMiddleware', # 必须在最顶层

]

　　注意由中间件的执行顺序，必须要把cors的配置放在顶部

　　（3）设置进行跨域的ip地址

CORS_ORIGIN_WHITELIST = (

    '127.0.0.1:8080',

    'localhost:8080',

    '127.0.0.1:8080'

)

　　（4）设置跨域时允许携带cookie

CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

　　这一步时必须要设置的不然利用Django的obtain_jwt_token验证登陆

　　（5）设置允许那些主机访问

ALLOWED_HOSTS = ['127.0.0.1']

当然跨域的实现方式有许多，我这里只是使用了其中的一种，如果你还有其他的方案可以在下方留言，欢迎交流