【http】跨域解决方案

同源策略

• 「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。
• url 的组成部分
  
  -「protocol（协议）、domain（域名）、port（端口）三者一致。」
• 在默认情况下 http 可以省略端口 80， https 省略 443。

跨域资源共享(CORS)

• 当一个资源从与该资源本身所在的服务器「不同的域、协议或端口」请求一个资源时，资源会发起一个「跨域 HTTP 请求」。

简单请求

• 不会触发 CORS 预检请求。
• 使用以下方法：
  GET
  HEAD
  POST
• *人为设置以下集合外的请求头
• *Content-Type的值仅限于下列三者之一
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
  请求中没有使用 ReadableStream 对象。

非简单请求

除了上面情况外的

• 加入了一个非集合内的 headers 头 cc 来达到非简单请求的目的。

解决方案

• require 第三方中间件（koa-cors）

Node 正向代理

思路

利用服务端请求不会跨域的特性，让接口和当前站点同域

cli 工具中的代理

• 1. Webpack (4.x)
     在webpack中可以配置proxy来快速获得接口代理的能力。
• 一个搜索的技巧，上面配置写哪里都不用记的，想要哪个框架的 直接 google 搜索 xxx proxy 就行了

Nginx 反向代理

JSONP

Websocket

• WebSocket 规范定义了一种 API，可在网络浏览器和服务器之间建立“套接字”连接。简单地说：客户端和服务器之间存在持久的连接，而且双方都可以随时开始发送数据。详细教程可以看 https://www.html5rocks.com/zh/tutorials/websockets/basics/
  这种方式本质没有使用了 HTTP 的响应头, 因此也没有跨域的限制

window.postMessage

document.domain + Iframe

window.location.hash + Iframe

window.name + Iframe

浏览器开启跨域

为什么需要跨域？

1.限制不同源的请求

这里还是用最常用的方式来讲解，例如用户登录 a 网站，同时新开 tab 打开了 b 网站，如果不限制同源， b 可以像 a 网站发起任何请求，会让不法分子有机可趁。

2.限制 dom 操作

可以在 http 返回头 添加X-Frame-Options: SAMEORIGIN 防止被别人添加至 iframe。

致谢

作者：蓝色的秋风
链接：https://juejin.im/post/5e948bbbf265da47f2561705
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。