为何使用Axios发送DELETE/PUT请求时实际为OPTIONS请求？

嗨，这个问题我之前排查跨域场景时经常碰到，其实这是浏览器的**跨域资源共享（CORS）**机制在自动起作用，具体来说是触发了「预检请求（Preflight Request）」，我给你一步步拆解清楚：

1. 什么是预检请求？ #

浏览器为了保障跨域请求的安全性，当你发送的是非简单请求时，会先自动发送一个OPTIONS请求到服务器，相当于提前“打招呼”：我接下来要发一个特定方法的请求，你允许吗？

而DELETE、PUT就属于触发预检的非简单请求范畴——简单请求只包含GET、HEAD、POST三种方法，且POST请求的Content-Type只能是application/x-www-form-urlencoded、multipart/form-data、text/plain这三类。

2. Access-Control-Request-Method字段的作用 #

你看到的Access-Control-Request-Method: DELETE/PUT，就是浏览器在预检请求里明确告诉服务器：「我接下来要发送的实际请求方法是DELETE（或PUT），你是否允许这个方法？」

同时如果你的请求带了自定义请求头，还会有Access-Control-Request-Headers字段，把要带的头信息也同步告知服务器。

3. 怎么解决这个问题？ #

要让后续的DELETE/PUT请求正常发送，服务器必须在OPTIONS请求的响应里返回正确的CORS允许头，核心需要配置的字段包括：

• Access-Control-Allow-Origin：允许发起跨域请求的前端域名（比如https://your-frontend.com，如果不需要带cookie也可以用*）
• Access-Control-Allow-Methods：必须包含你要用的DELETE、PUT方法，比如设置为GET,POST,PUT,DELETE
• Access-Control-Allow-Headers：如果你的请求带了自定义头（比如Authorization），这里要包含对应的头名称；如果没有自定义头，至少要覆盖默认的请求头
• Access-Control-Max-Age：可选，用来设置预检请求结果的缓存时间（比如86400秒），避免每次发DELETE/PUT都先触发OPTIONS

举个Node.js Express的配置例子，用cors中间件就能快速搞定：

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: 'https://your-frontend-domain.com', // 替换成你的前端域名
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'] // 根据实际请求头调整
}));

如果服务器没正确配置这些头，浏览器就会拦截后续的实际DELETE/PUT请求，你在控制台能看到CORS相关的报错提示。

内容的提问来源于stack exchange，提问作者Hieu Vu