要了解跨域需要先了解一个词叫:同源策略
同源策略:
什么是同源策略:同源策略规定某域下的客户端在没明确授权的情况下,不能读写另一个域的资源。
为什么需要同源策略,一个重要原因就是对cookie的保护。cookie 中存着sessionID 。黑客一旦获取了sessionID,并且在有效期内,就可以登录。当我们访问了一个恶意网站 如果没有同源策略 那么这个网站就能通过js 访问document.cookie 得到用户关于的各个网站的sessionID 其中可能有银行网站 等等。通过已经建立好的session连接进行攻击,比如CSRF攻击。
哪些属于同源。
下表给出了相对http://store.company.com:80/dir/page.html同源检测的示例:
http://store.company.com/dir2/other.html成功
http://store.company.com/dir/inner/another.html成功
https://store.company.com/secure.html失败 不同协议 ( https和http )
http://store.company.com:81/dir/etc.html失败 不同端口 ( 81和80)
http://news.company.com/dir/other.html失败 不同域名 ( news和store )
前端的哪些同源策略:
同源策略限制图示
实际开发中,前后端常常是相互分离的,并且前后端的项目部署也常常不在一个服务器内或者在一个服务器的不同端口下。前端想要获取后端的数据,就必须发起请求,如果不跨域,就会受到浏览器同源策略的约束。
跨域的解决方案:
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
有时间再谈
网友评论