跨域资源共享(CORS)是一种机制，它使用额外的HTTP头来告诉浏览器，让运行在一个origin(domain)上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域HTTP请求。跨域资源共享( CORS )机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch )使用 CORS，以降低跨域 HTTP 请求所带来的风险。https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS同源策略

域名、协议、端口均相同。

什么是跨域？

跨域：指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器的安全限制！

我们用 koa 写一个简单的 server：

并在前端页面中请求/api接口(前端页面跑在3000端口)：

因为端口不同产生了跨域,所以可以看到报错如图：

分析错误原因：没有“Access-Control-Allow-Origin”标头。但是我们能在server端的log中看到：

并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。当我们在 server 端配置 Access-Control-Allow-Origin 标识允许哪个域的请求 (* 简单粗暴的表示所有都可以)。

前端就可以正常访问到结果了。简单请求

某些请求不会触发 CORS 预检请求。

若请求满足所有下述条件，则该请求可视为“简单请求”：

• 请求方法为 GET、HEAD、POST 时发的请求

• 人为设置了规范集合之内的首部字段，如 Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width

• Content-Type 的值仅限于下列三者之一，即 application/x-www-form-urlencoded、multipart/form-data、text/plain

• 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器

• 请求中没有使用 ReadableStream 对象

上边的 demo 就是符合一个简单请求。预检请求不满足简单请求时，要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。“预检请求”的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。修改前端的请求，通过设置HEAD字段，使它不再是一个简单请求：

就可以看到，浏览器多发出了一个options请求：

预检请求header中包含关键字段：Access-Control-Request-Method：告知服务器，实际请求将使用的方法。Access-Control-Request-Headers：告知服务器，实际请求将携带的自定义请求header字段。服务端则需要设置相对应的：Access-Control-Allow-Methods：表明服务器允许客户端使用什么方法发起请求。Access-Control-Allow-Headers：服务器允许的自定义请求 header 中的字段。比如：(允许 header 中携带 sign 字段)

PS：koa 框架有对应的 cors 模块，使用起来会更加简单。请求携带cookies

对于跨域请求浏览器默认不会携带cookie信息，fetch方式需要设置 credentials: "include"，XMLHttpRequest设置 withCredentials:"include"。

服务端需要同时设置 Access-Control-Allow-Credentials:true注：如果我们在请求中设置了 credentials: "include"，服务端就不能设置 Access-Control-Allow-Origin: "*"只能设置为一个明确的地址。OPTIONS请求优化

当触发预检时，跨域请求便会发送2次请求，既增加了请求数，也延迟了请求真正发起的时间，影响性能。

• 转化为简单请求• Access-Control-Max-Age 表示预请求的返回结果，即 Access-Control-Allow-Methods / Access-Control-Allow-Headers 可以被缓存多久，单位为秒。

设置缓存时间为10分钟，则一分钟只能不会重复发送 OPTIONS 请求。