同源策略、跨域

访问资源时遇到问题，报错：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解决跨域问题