CORS 101：理解跨域资源共享的核心机制！

在开始之前先来了解一下相关的概念知识：

同源策略：以下三者中的任何一个不同，就是不同源。

• 协议（如 http 和 https）
• 域名（如 example.com 和 api.example.com）
• 端口（如 :80 和 :443）

跨域：指的是违背浏览器的同源策略。不同源之间的请求会受到限制。这是为了防止恶意网站访问用户数据或执行其他不安全的操作。

例如，从 http://127.0.0.1:5500 发起的请求试图访问 https://www.bilibili.com 上的资源时，就会涉及跨域。

跨域常见解决方案：

• JSONP：通过 <script> 标签加载数据。
• 代理(Proxy)服务器：开发阶段在本地开启同源服务器，设置代理，转发请求到目标服务器。
• WebSocket：客户端和服务器之间进行双向通信，不受同源策略限制。
• . . .
• CORS

CORS（跨域资源共享）

CORS，全称是Cross-Origin Resource Sharing， 是一种机制，允许服务器指定哪些来源可以访问资源。通过设置 HTTP 头部来实现，允许跨源请求和数据共享。 支持所有类型的 HTTP 请求。

cors规则：一套机制，用于浏览器校验跨域请求，基本理念是：

• 服务器表示允许，则校验通过
• 服务器`明确拒绝或者没有表示**，则校验不通过

使用cors方案的前提是，保证服务器是自己人的⭐

简单请求、预检请求

cors将请求分为两类：

• 简单请求

  • 请求方法是get、post、head

  • 头部字段满足CORS安全规范（请求头其他字段不动，一般则符合安全规范）

  • 请求头的Content-Type值为：

    • text/plain
    • multipart/form-data
    • application/x-www-form-urldecoded

• 预检请求（Preflight）

  • 非简单请求

对于简单请求：

• 发请求时，浏览器发现是一个跨域请求，会自动在请求头上加一个Origin:server地址发送到服务器
• 服务器控制是否允许通过，直接在响应头设置Assess-Control-Allow-Origin(访问控制允许的域) 属性

设置 * 表示允许所有请求通过，不建议使用

对于预检请求：

比简单请求复杂一点，先发送一个预检请求，通过之后在发送真实请求

• 第一步：预检请求在请求时，会带上请求的源（域） 、请求方式、请求头改动的字段
• 服务器这边发现是一个预检请求，自行判断是否通过
• 响应头返回允许的域、请求方式、请求头改动字段时，则表示通过，还可以设置Max-Age（过期时间） ，表示在此期间无需校验
• 第二步：发送真实请求，流程和简单请求一致

写在最后

虽说CORS方式是在服务器端做处理来解决跨域问题，但是作为前端开发者，掌握 CORS 的基本概念、工作原理及配置方法也是有必要的。