跨域资源共享（CORS） | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第 12 天跨域资源共享（CORS）是

这是我参与「第四届青训营」笔记创作活动的第 12 天

1. 什么是 CORS

W3C 提出的一个标准，允许浏览器向跨域服务器发出 XMLHttpRequest 请求，是一种基于 HTTP 头的机制。

什么情况下需要 CORS

XMLHttpRequest 或 Fetch APIs 发起的跨源 HTTP 请求；
Web 字体（CSS 中通过 @font-face 使用跨源字体）
WebGL 贴图
使用 drawImage 将 Images/video 画面绘制到 canvas；
来自图像的 CSS 图形

首先 CORS 需要浏览器和服务器同时支持（IE9- 不支持）。浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）

举个栗子

打开控制台，在掘金内请求主页，并不会提示跨域

但请求 missevan 的资源会提示禁止跨域

2. 如何解决跨域问题

2.1. 修改响应头 `Access-Control-Allow-Origin`

使用 Charles 或 chrome 插件 ModHeader 模拟，为请求添加响应头

// 允许所有服务器获取本机资源
Access-Control-Allow-Origin:* 

// 允许 https://juejin.cn/ 域名的服务器获取本机资源
Access-Control-Allow-Origin: https://juejin.cn/

2.2. 使用 jsonp

所有拥有 src、href 属性的标签都可以跨域，jsonp 利用了这一“漏洞”，用来解决跨域问题。但它只支持 GET 请求。

大概是构造 script 标签，请求某接口并携带 callback 参数，服务端处理后返回，直接在当前域内执行服务端返回的方法。具体栗子等之后学到 node.js 再详细看，这里仅作了解。

之所以称之为“漏洞”，是因为很多 XSS 攻击都是利用这一点对网站实施攻击的

2.3. 使用 nginx 配置反向代理

目前对服务端内容还不是很了解，以下推测仅基于现有知识库存，之后大概率会补充

当服务端代码中不便全部添加响应头，或者只在某种情况下添加响应头（比如测试机），可以使用 nginx 作为入口网关，为某些接口加上响应头允许其跨域，这样用户的请求会先打到 nginx，然后再到响应接口，最后返回数据给客户端

2.4. 使用 WebSocket

这里不是很熟 orz，之后会了解一下

参考：《【跨域请求】【前端】什么是CORS，教你解决跨域问题》《nginx正向代理与反向代理》《反向代理为何叫反向代理？》《8分钟带你深入浅出搞懂Nginx》

跨域资源共享（CORS） | 青训营笔记