目录
前言
两次请求，前后分析问题何在，最后发现是预检的知识点
为何会有预检请求这个概念：为了提高安全性，避免潜在的安全漏洞
- 安全性：允许浏览器在发送跨域请求之前检查服务器是否允许这种操作，防止未经授权的请求对用户数据进行操作
- 复杂请求：对于一些复杂的请求（例如，使用了自定义头部、非简单请求方法如 PUT、DELETE，或者内容类型为非 application/x-www-form-urlencoded、multipart/form-data 或 text/plain），浏览器需要进行预检请求，以确认服务器允许这些请求
1. 基本知识
CORS（跨域资源共享）协议的一部分，用于确保浏览器在实际发送跨域请求之前能够获得服务器的授权
以OPTIONS 请求发送
一般在以下情况下触发：
- 使用了 HTTP 方法 PUT、DELETE 或其他非简单方法（GET、POST 和 HEAD 被认为是简单方法）
- 请求中包含了非标准的自定义头部
- 请求的内容类型是 application/json 或其他不常见的类型
- 请求中包含了 Authorization 等特殊头部
基本的请求流程如下：
- 浏览器发起预检请求：浏览器向服务器发送一个 OPTIONS 请求，询问服务器是否允许实际的跨域请求
- 服务器响应预检请求：服务器响应预检请求，包含允许的 HTTP 方法、允许的头部等信息
- 浏览器检查响应：浏览器根据服务器的响应决定是否继续发送实际的跨域请求
2. Demo
预检请求通常包含如下头部：
Access-Control-Request-Method: 期望的实际请求方法
Access-Control-Request-Headers: 实际请求中包含的自定义头部列表
服务器在响应中需要包含如下头部：
Access-Control-Allow-Methods: 允许的请求方法
Access-Control-Allow-Headers: 允许的请求头部
Access-Control-Allow-Origin: 允许的来源
在服务器端，需要配置允许的 CORS 头部，以便处理预检请求
可以这样设置 CORS 中间件：（例如 Express.js）
const cors = require('cors');
app.use(cors({
origin: 'https://example.com',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization']
}));