更新时间: 2017-06-05 10:59:45       分类: web开发


同源策略

跨域问题 本身是因为浏览器的同源策略限制而引发的,所以有必要先来了解一下什么是浏览器的同源策略:

浏览器的同源策略

同源策略 是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源。

这是浏览器中最为重要的安全策略之一,设想一下如果浏览器没有同源策略的限制,那么当你登录了a站点之后,打开了b站点,b站点上的脚本将可以跨域读取你在a站点上的所有信息,那么整个web世界将毫无隐私可言

何为同源

“同源”是指,(JS)脚本的域名协议端口必须和请求资源的相同,否则就会被判定为跨域

举例子 如果js脚本的地址是 http://www.a.com/a.js 那么看下面这几种情况:

安全问题

跨域问题存在的安全性,以及同源的绕过,可以参考下面这篇文章:

点我

跨域请求的解决方案

由于现在前后端使用分离式的开发,如果前端的js脚本和后端服务不在同一个域(很有可能)时,就会发生跨域请求,无论是ajax还是fetch都会需要面临这个问题。

在尝试解决这个问题之前,我们必须理清一点,那就是,同源策略,归根结底,是浏览器的限制,而和后端服务并无关系。

1.CORS:跨域资源共享

这是针对于后端服务来说的一种,辅助前端解决跨域问题的方案。

后端通过对自己的响应设定Access-Control-Allow-Origin头来指定可以跨域访问自己的请求源,就可以解决前端脚本的跨域问题,(可以使用通配符),不过这样本身存在一定的安全隐患。

CORS下的请求一般会在正式的请求前,增加一个OPTIONS握手请求,用于判断后端服务设定的同源策略。

2.前端自定义反向代理

这是一个比较通用也比较简单的实现方案,就是前端把自己的页面挂起成服务(假设它有了域名a),然后在同一个域下,利用nginx的反向代理功能,把后端的服务代理到自己的本地来, js脚本中的网络请求,就相当于是在请求自己本地的域名了,自然变成了同域请求,也就没有跨域问题了。

正向代理与反向代理

正向代理和反向代理都是代理机制,他们最大的特点和区别可以这么描述:

反向代理可以用于实现负载均衡,所有的请求全部被反向代理服务器获取,然后根据需求和实际情况转发到不同的服务端获得结果再返回给客户端。

参考阅读

3.其他

可以使用插件或者jsonp等一些其他的手段解决。

跨域问题本身是前端浏览器的限制,作为一个后端我没有办法再讲的更详细了,完全的解决方案自行参考:

8种跨域解决方案


评论

还没有评论