访问资源时遇到问题,报错:No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
原因:访问的资源不是同源的。
1.什么是同源策略?
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能
所谓同源是指: 协议,域名(一级、二级域名),端口都相同,就是同源, 否则就是跨域
协议:域名;端口快速了解:
https://www.test.com:80/index.html
- 协议: http/https/…
- 一级域名: test.com
- 二级域名: www/study/edu/…
- 端口号: 80/3306/…
- 资源路径:index.html
举例说明:
(1).协议+一级域名+二级域名+端口号都相同, 所以同源
http://www.test.com:80/index.html
http://www.test.com:80/detail.html
(2). 协议不同, 所以不同源, 是跨域
http://www.test.com:80/index.html
https://www.test.com:80/index.html
(3).一级域名不同, 所以不同源, 是跨域
http://www.test.com:80/index.html
http://www.it.com:80/index.html
(4).二级域名不同, 所以不同源, 是跨域
http://www.test…com:80/index.html
http://edu.test.com:80/index.html
(5).端口号不同, 所以不同源, 是跨域
http://www.test.com:80/index.html
http://www.test.com:8090/index.html
2.同源策略带来的影响
在同源策略下, 浏览器只允许Ajax请求同源的数据, 不允许请求不同源的数据
但在企业开发中, 一般情况下为了提升网页的性能, 网页和数据都是单独存储在不同服务器上的
这时如果再通过Ajax请求数据就会拿不到跨域数据
3.跨域解决方案
jsonp:主要用这种,下面的其他方法基本不用了
document.domain+iframe
location.hash + iframe
window.name + iframe
window.postMessage
flash等第三方插件
4.jsonp解决跨域原理及使用
篇幅有限,详见博文JSONP解决跨域问题