一文读懂预检的基本知识

前言

两次请求，前后分析问题何在，最后发现是预检的知识点

为何会有预检请求这个概念：为了提高安全性，避免潜在的安全漏洞

• 安全性：允许浏览器在发送跨域请求之前检查服务器是否允许这种操作，防止未经授权的请求对用户数据进行操作
• 复杂请求：对于一些复杂的请求（例如，使用了自定义头部、非简单请求方法如 PUT、DELETE，或者内容类型为非 application/x-www-form-urlencoded、multipart/form-data 或 text/plain），浏览器需要进行预检请求，以确认服务器允许这些请求

1. 基本知识

CORS（跨域资源共享）协议的一部分，用于确保浏览器在实际发送跨域请求之前能够获得服务器的授权

以OPTIONS 请求发送

一般在以下情况下触发：

• 使用了 HTTP 方法 PUT、DELETE 或其他非简单方法（GET、POST 和 HEAD 被认为是简单方法）
• 请求中包含了非标准的自定义头部
• 请求的内容类型是 application/json 或其他不常见的类型
• 请求中包含了 Authorization 等特殊头部

基本的请求流程如下：

1. 浏览器发起预检请求：浏览器向服务器发送一个 OPTIONS 请求，询问服务器是否允许实际的跨域请求
2. 服务器响应预检请求：服务器响应预检请求，包含允许的 HTTP 方法、允许的头部等信息
3. 浏览器检查响应：浏览器根据服务器的响应决定是否继续发送实际的跨域请求

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']
}));