最近在项目中发现了一个跨域问题。
后台和前端都设置了跨域仍然报跨域
为什么会有跨域问题
出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)
经常见的跨域场景
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js | 同一域名,不同文件或路径 | 允许 |
http://www.domain.com:8000/a.js http://www.domain.com/b.js | 同一域名,不同端口 | 不允许 |
http://http://www.domain.com/a.js https://www.domain.com/b.js | 同一域名,不同协议 | 不允许 |
http://http://www.domain.com/a.js http://192.168.4.12/b.js | 域名和域名对应相同ip | 不允许 |
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js | 主域相同,子域不同 | 不允许 |
http://www.domain1.com/a.js http://www.domain2.com/b.js | 不同域名 | 不允许 |
跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享(CORS)
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
这里不展开了,方案的网上有很多demo.
跨域需要注意不能同时设置两个跨域