Why
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
源的定义
如果协议，端口和域名对于两个页面是相同的，则两个页面具有相同的源。
示例:
| URL | 结果 | 原因 |
|---|---|---|
| http://example.com/index | true | 同源 |
| http://example.com/user | true | 同源 |
| http://example.com:81/index | false | 端口不同 |
| http://m.example.com/index | false | 子域不同 |
| https://m.example.com/index | false | 协议不同 |
How
1. 使用JSONP
通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决跨域的数据请求。
<script type="text/javascript" src="http://api.example.com/getdata?jsonp=callback"></script> 缺点：只支持GET请求
2.跨源资源共享(Cross-Origin Resource Sharing)
这是已经标准化的技术方法，详见W3规范文档
通过在服务端设置Access-Control-Allow-Origin响应头,下图是PHP中的 hander() 设置，“*”号表示允许任何域向我们的服务端提交请求，也可详细指定具体域名
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Origin: http://app.example.com');来告诉浏览器该服务允许来自特定源的访问或者允许所有人访问。
缺点：需要浏览器支持，详见CORS浏览器支持情况