常用跨域方法 - Githubissues

什么是同源策略及限制

判断是否同源（协议，域名，端口三者都相同）

同源限制是浏览器的行为，浏览器为了客户端安全（防止XSS、CSRF等攻击）会拦截服务端返回的response，所以跨域并不是请求发不出去，只是服务端返回的结果被浏览器拦截了。

不是一个源，将会限制以下操作：

Cookie，LocalStorage，IndexDB 无法读取
DOM 无法获取
AJAX 请求不能发送

跨域通信的几种方式

CORS （Cross-Origin Resource Sharing 跨域资源共享）

主要由后端配置，后端在返回的响应头添加Access-Control-Allow-Origin 就可以启用CORS。值得注意的是开启了CORS后的请求分为简单请求和复杂请求，对于复杂请求客户端会先向服务端发送一条预检请求（OPTIONS）。

满足以下两个条件的请求为简单请求。

请求方法为HEAD, GET, POST。
HTTP 的头信息不超过以下几种字段。

- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type 为 application/x-www-form-urlencoded, multipart/form-data, text/plain。

JSONP

利用script 标签的src 属性不受浏览器的跨域限制。所以能够使用get 方法向服务端发送请求，但是也只支持GET 请求而不支持POST 等其它类型的HTTP 请求。

具体实现戳jsonp 的原理和实现。

postMessage

MDN postMessage

适用于以下场景：

页面和其打开的新窗口的数据传递（window.open 会返回打开窗口的对象引用）
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递


// a 页面

let ifr = document.querySelector('#iframe'); // 获得a 页面内嵌套的iframe 元素。

ifr.contentWindow.postMessage('hello world', 'http://b.com');
// otherWindow.postMessage(message, targetOrigin, [transfer]);

// b 页面

window.addEventListener('message', function (e) {
  console.log(e.source); // 发送消息的窗口对象的引用
  console.log(e.origin); // http://a.com
  console.log(e.data); // hello world
})

nginx 反向代理

搭建一个中转nginx服务器，用于转发请求。配置最简单，只需要修改nginx的配置即可，不需要修改任何代码。


// nginx.conf
server {
    ...
    // 设置代理
    location / {
        proxy_pass http://127.0.0.1:8080;
    }
    ...
}

theydy / notebook