我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值.

本文作者：霁明 。

什么是CORS

CORS（跨域资源共享）是一种基于HTTP头的机制，可以放宽浏览器的同源策略，实现不同域名网站之间的通信.

前置知识

同源定义：协议、域名、端口号一致即为同源.

CORS主要相关标头:

Access-Control-Allow-Origin：指定该响应的资源是否允许与给定的来源（origin）共享.

Access-Control-Allow-Credentials：用于在请求要求包含 credentials 时，告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码.

CORS使用

常规使用方式

将ACAO标头指定为特定的源，Access-Control-Allow-Origin: http://a.b.com 。

如果请求需要携带凭证（例如cookies、authorization headers 或 TLS client certificates），需要将ACAC标头设置为true，Access-Control-Allow-Credentials: true.

另外，前端请求方法需要配置 credentials 。

// XHR
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/");
xhr.withCredentials = true;
xhr.send();

// Fetch
fetch(url, {
  credentials: "include",
});

常见的错误用法

同时配置多个源

将多个源同时写在ACAO标头里:

Access-Control-Allow-Origin: http://a.b.com,http://c.b.com

或者同时设置了多个ACAO标头:

Access-Control-Allow-Origin: http://a.b.com
Access-Control-Allow-Origin: http://c.b.com

此时跨域请求会报错，提示只能配置一个源:

在ACAO标头里使用通配符

Access-Control-Allow-Origin: *.b.com

此时跨域请求会报错，提示配置的源无效: