为什么有时候会发送两次请求(cors 预检)

• 为什么有时候会发送两次请求(cors 预检)
  • CORS
  • 请求的两种类型

CORS

CORS(跨域资源共享) 是前后端开发中一个核心的概念。

cors 是一种浏览器的安全机制，允许服务器指定哪些源可以访问他的资源。

浏览器出于安全考虑，默认禁止从不同的源请求数据。

这个限制就是同源策略

这里的同源指的是: 协议、域名、端口必须一致。

同源策略主要是防止以下的危险行为：

• 窃取敏感信息（如 Cookie / LocalStorage / 响应内容）
• JS 操作 iframe 跨源 DOM
• JS 读取跨域接口响
• xss 攻击

请求的两种类型

在 Http 请求中，请求会被分为两种类型

• 简单请求
  简单请求需要同时满三个条件：

  1. 请求方法是以下三种方法之一：HEAD，GET，POST
  2. HTTP 的头信息不超出以下几种字段：
     1. Accept：指定返回类型，: text/plain（纯文本类型）, text/html（html 类型）
     2. Accept-Language 指定返回语言
     3. Content-Language 指定内容语言
     4. Content-Type：只限于三个值
        1. application/x-www-form-urlencoded:对发送内容进行编码
        2. multipart/form-data:上传的表单内包含文件
        3. text/plain:发送内容为纯文本格式
  3. 请求不携带 credentials（cookie / HTTP 认证头）

     除非服务端明确允许携带 credentials

• 非简单请求

  任何不满足简单请求的请求都是非简单请求，在进请求时浏览器会自动先发一个OPTIONS 请求进行**预检**，确认服务端是否允许跨源通信，只有在预检通过的时候才会进行真正的请求

预检通过后段会在响应头返回

字段	说明
Access-Control-Allow-Origin	指定允许的前端源，例如 https://example.com，不能省
Access-Control-Allow-Methods	指定允许哪些 HTTP 方法（如 GET, POST, PUT）
Access-Control-Allow-Headers	指定前端请求中允许使用的自定义请求头（如 Authorization, Content-Type）
Access-Control-Allow-Credentials	若为 true，表示允许携带 cookie、认证信息等
Access-Control-Max-Age	浏览器缓存这次预检许可的时间（秒），避免频繁发送 OPTIONS

某些请求发送两次，实际上是触发了预检操作