同源策略

概念

出于防范跨站脚本的攻击，禁止客户端脚本（如JavaScript）对不同域对服务进行跨站调用（通常指使用XMLHttpRequest请求）。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的重要安全机制。

定义

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源，我们也可以把它称为“协议主机端口”，或简单称为“tuple”元

源的继承

在页面中用about:blank或javascriptURL执行的脚本会继承打开该URL的文档的源，因为这些类型的URLs没有明确包含有关原始服务器的信息
例如，about:blank 通常作为父脚本写入内容的新的空白弹出窗口的 URL（例如，通过 Window.open() 机制）。如果此弹出窗口也包含代码，则该代码将继承与创建它的脚本相同的源。

跨域请求方式

解决跨域问题，最简单对莫过于通过Nginx反向代理进行，但是其需要在服务器层面修改，且有可能请求对资源并不在我们控制范围内（第三方），所以该方式不能作为通用对解决方案：

方式一：图片ping或script标签跨域

图片ping常用于跟踪用户点击页面或动态广告曝光次数。 script标签可以得到从其他来源数据，这也是JSONP依赖的根据。

<img src="https://domain.com/pn">

缺点

只能发送Get请求，无法访问服务器的响应文本（单向请求）。

方式二：JSONP跨域

JSONP是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。根据XmlHttpRequest对象受到同源策略的影响，而利用<script>元素的这个开放策略，网页可以得到从其他来源动态产生JSON数据，而这种使用模式就是所谓的JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用JavaScript解释器运行而不是用JSON解析器解析。所以，通过Chrome查看所有JSONP发送的Get请求都是js类型，而非XHR。

// 页面请求代码
<script src="http://localhost:3001?callback=myFunction"></script>
<script>
    function myFunction(msg){
        console.log('此处对服务器传回来对数据解析')
        console.log(msg)
    }
</script>
// 服务端响应代码，通过返回message带服务器数据
app.get('/', function (req, res) {
    var callbackName = req.query.callback;   // myFunction
    res.send(callbackName+"({'message': 'hello world from JSONP!🙃'});");
    // myFunction({'message': 'hello world from JSONP!'})
    // 一个带参数的执行函数
});

缺点

只能使用Get请求
不能注册success、error等事件监听函数，不能很容易的确定JSONP请求是否失败
JSONP是从其他域中加载代码执行，容易受到跨站请求伪造的攻击，其安全性无法确保。

方式三：CORS

Cross-Origin Resource Sharing (CORS)跨域资源资源共享是一份浏览器技术的规范，提供了Web服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器是用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与JSONP不同，CORS除了GET要求方法以外也支持其他的HTTP要求。服务器一般需要增加如下响应头的一种或几种：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默认不会携带Cookie信息，如果需要携带，请配置下述参数：

"Access-Control-Allow-Credentials": true
# Ajax设置
"withCredentials": true

方式四：window.name + iframe

window.name通过在iframe（一般动态创建）中加载跨域HTML文件来起作用。然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。

iframe 标签的跨域能力
window.name属性值在文档刷新后依旧存在的能力（且最大允许2M左右）。
每个iframe都有包裹它的window，而这个window是topwindow的子窗口eventWindow属性返回<iframe>元素的window对象。可以使用这个window对象来访问iframe的文档及其内部DOM。

本来用来作为window的名字，标记有没有刷新

方式六：通过document.domain+iframe来跨子域(必须主域相同)

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域，所以只能跨子域

在根域范围内，允许把domain属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，可以把domain设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。

现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，由于其document.name不一致，无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将document.name = 'xxx.com';设置一致，来达到互相访问的作用。

方式七：WebSocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很棒的实现。相关文章，请查看：WebSocket、WebSocket-SockJS

需要注意：WebSocket对象不支持DOM 2级事件侦听器，必须使用DOM 0级语法分别定义各个事件。

方式八：代理

同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题

DomainA客户端（浏览器） ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端（浏览器）

实现HTTP、HTTPS代理请参照：创建HTTP与HTTPS服务器与客户端

前端跨域