跨域访问方法介绍(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）

二、同源策略

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

不一样源的交互一般分为三类：

跨域写操做（Cross-origin writes）通常是被容许的。例如连接（links），重定向以及表单提交。
跨域资源嵌入（Cross-origin embedding）通常是被容许。
跨域读操做（Cross-origin reads）通常是不被容许的，但常能够经过内嵌资源来巧妙的进行读取访问。

能够跨源嵌入的资源：

一、<script src="..."></script> 标签嵌入的跨域脚本。
二、<link rel="stylesheet" href="..."> 标签嵌入的CSS。因为CSS的松散的语法规则，CSS的跨域须要一个设置正确的 HTTP 头部 Content-Type 。不一样浏览器有不一样的限制。
三、<img> 标签嵌入的图片。
四、<video> 和 <audio> 标签嵌入的多媒体资源。
五、<object>、 <embed> 和 <applet> 标签嵌入的插件。
六、@font-face 引入的字体。一些浏览器容许跨域字体（ cross-origin fonts），一些须要同源字体（same-origin fonts）。
七、<iframe> 载入的任何资源。站点可使用 X-Frame-Options 消息头来阻止这种形式的跨域交互

不能够跨源访问的资源：

一、Cookie、LocalStorage、IndexedDB 等存储性内容
二、Dom 节点
三、Ajax 请求