理解 CORS 跨域资源共享

同源策略

浏览器的同源策略（same-origin policy）禁止网页内的脚本获取他其他域的资源。这是浏览器最基础的安全策略之一。

一个域的描述由三个部分组成：Schema (http/https)，Host 以及 Port。如果两个 url 的这三个部分都相同，则我们认为是同一个域。否则为不同域。

跨域访问

同源策略的本意是为了网络安全。但特别是现在，很多业务场景是需要跨域访问的。比如我希望在自己的网站上，展示海外的天气信息，而这个天气信息可能就是从我的网页直接 JS 请求海外的一个天气信息服务来获取的。这个时候，我们就需要用到 CORS (Cross-Origin Resource Sharing (CORS) 即跨域资源共享。

CORS 工作原理

1. 浏览器加载网页 http://A.com，基于该网页的 JS 定义，向 http://B.com/info 发起 http 请求获取一些资源信息。发送请求时，浏览器会在请求头里面加一个 Origin头信息，其中包含 A 的域信息。

Origin: <scheme> "://" <hostname> [ ":" <port> ]

2. B 服务在收到 A 的请求后，会检查 Origin 头里的信息，同时在返回报文头里面廉价一个 Access-Control-Allow-Origin 头信息来声明允许访问返回资源信息的域。（"*" 则代表所有域都可以访问）

Access-Control-Allow-Origin: *

3. 浏览器收到 B 的返回报文（即资源）。检查报文头 Access-Control-Allow-Origin 内的域许可信息——允许 A 访问该资源。此时，浏览器会正常允许网页 A 读取此时获取到的 B 资源。

参考

1. Web.dev: Cross Origin Resource Sharing
2. Mozilla.org: Same-origin policy
3. Mozilla.org: Origin