跨域资源共享(CORS)

2018-02-09  本文已影响0人  manbug

手头的项目是Django + Vue,采用前后端分离的方式,跨域是一个必然的问题。不过因为接手的时候项目框架已经搭好,所以现在才意识到,找了一些资料,谈一下自己的理解。

1. 概念。

所谓的CORS,主要是针对浏览器的一条规定 -- 浏览器同源策略
那么问题来了:
挖掘机技术...
我是说,什么是同源策略,以及为什么要有这个策略?
简单来说,浏览器同源策略就是禁止非同协议,同域名,同端口下的信息互相访问。
原因呢,当然是为了安全。

2. 举个栗子
浏览器同源策略.png
假如说这个样子,为了变得更强你早上起来先冲了个值,登录了icbc,然后呢变得更强了需要释放自我又登录了9x,这时候如果说9x埋点,它在你的Cookie里面搜索icbc,如果搜索到了就读你的信息,并把信息返回给自己的数据库,那它可能就获取到你的icbc的相关信息了。
或者说它植入一个恶意脚本什么的,调用你的icbc的Cookie去访问icbc的网站,甚至在你的浏览器里为icbc植入一个假的登录窗口……
如果允许信息的随意访问,这会是一件防不胜防的事,尽管CSRF可以加一层token验证,但是理论上来讲这个token既然写在了页面里,那么我只需要多get一次。
所以,为了防止世界被破坏,为了安全,浏览器直接定了个死规定,全禁掉。
那么问题也就来了,如果前后端是分离的,意味着你的API也需要请求不同的域名,怎么办。
3. 解决办法

其实这里还有一个问题,就是这个“同源”是如何判断的。
我的理解是:如图中B - A的过程,实际上是B-Browser-A,浏览器会对这个ajax请求的来源和被请求服务器做一个域名,端口,协议的对比,来判断是否触发同源协议。所以说如果用django自己的mvc(mtv)不必操心这个问题。
那么,具体如何解决api的访问,有如下几种办法:

  1. CORS 跨域资源共享:
    这个是最推荐的方式,实现方式应该是在服务器端设置白名单,允许某些域名跨域请求。
    django有这方面的插件 pip install django-cors-middleware
    具体配置方法可以自行搜索。
  2. ngnix增加响应头:
http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}
  1. nginx设置反向代理:
    没太看懂,感觉像是把某些路径下的地址请求转发到实际api的地址上。
    这样就可以在请求api的时候把url填成相同的域名(即一个假的地址),然后由nginx转发。
4. 后续

做了CORS后可以为了增强安全性,加入JWT验证,详情可见JWT

上一篇下一篇

猜你喜欢

热点阅读