跨域访问方法介绍(1)--同源策略

1、同源定义

如果两个 url 的 protocol(协议)、host(主机)和 port(端口)都相同的话，则这两个 url 是同源；否则为不同源。

当前页面url	被请求页面url	是否同源	原因
http://www.test.com/	http://www.test.com/index.html	是	同源（协议、域名、端口号相同）
http://www.test.com/	https://www.test.com/index.html	否	协议不同（http/https）
http://www.test.com/	http://www.baidu.com/	否	主域名不同（test/baidu）
http://www.test.com/	http://blog.test.com/	否	子域名不同（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	否	端口号不同（8080/7001）

2、同源策略

同源策略控制不同源之间的交互，它是一个重要的安全策略，它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

不同源的交互通常分为三类：

跨域写操作（cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。
跨域资源嵌入（cross-origin embedding）一般是被允许。
跨域读操作（cross-origin reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。

可以跨源嵌入的资源：

1、<script src="..."></script> 标签嵌入的跨域脚本。
2、<link rel="stylesheet" href="..."> 标签嵌入的css。由于css的松散的语法规则，css的跨域需要一个设置正确的 http 头部 content-type 。不同浏览器有不同的限制。
3、<img> 标签嵌入的图片。
4、<video> 和 <audio> 标签嵌入的多媒体资源。
5、<object>、 <embed> 和 <applet> 标签嵌入的插件。
6、@font-face 引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。
7、<iframe> 载入的任何资源。站点可以使用 x-frame-options 消息头来阻止这种形式的跨域交互

不可以跨源访问的资源：

1、cookie、localstorage、indexeddb 等存储性内容
2、dom 节点
3、ajax 请求