同源策略(Same-origin policy)是什么？

一、同源策略是什么？

一个 URL 有三部分组成：协议、域名(指向主机)、端口，只有这三个完全相同的 URL 才能称之为同源。如下，能和 http://www.example.com/dir/index.html 同源的是？

二、父域名与子域名

可以通过设置 document.domain，让子域名和父域名通过同源策略的检测。

// 1、子域名下面的页面
http://store.company.com/dir/other.html 

// 2、脚本代码中修改
document.domain = "company.com";

// 3、再去访问父域名下面的页面，可以不被跨域拦截
fetch("http://company.com/dir/page.html")

备注：但是如果端口不是默认80，也会失败，因为 document.domain = "company.com"; 会把端口设置为 null

三、跨域访问

跨域访问的解决方案是 CORS，详情，看这里！

摘录

一、CORS 是什么？

出于安全原因，浏览器会限制脚本发起的跨域 HTTP 请求，除非服务器同意访问。譬如服务器对预检请求的响应 Header中有Access-Control-Allow-Origin: *，那么跨域请求即可正确访问。

服务器响应跨域请求

Access-Control-Allow-Origin用于响应预检请求，表示允许该资源的外域 URI

// 允许所有
Access-Control-Allow-Origin: *

// 只允许 http://mozilla.com
Access-Control-Allow-Origin: http://mozilla.com

四、window.postMessage(不推荐)

跨域访问也可以通过 window.postMessage 来实现，不过不太推荐，很容易造成安全问题。window.postMessage - 详细用法说明！

五、参考文档

• 同源策略(Same-origin policy)是什么？