CORS 中 Access-Control-Allow-Methods 设置后为啥还是报错？

皇甫建英提问于 2026-02-24 18:14:20 阅读 13

安全

我前端用 fetch 发了个 DELETE 请求，但浏览器控制台一直报 CORS 错误，说 method 不被允许。后端明明已经加了 Access-Control-Allow-Methods: GET, POST, PUT, DELETE 啊，是不是我前端写法有问题？

这是我的请求代码：

fetch('/api/item/123', {
  method: 'DELETE',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => console.log(data));

CORS安全

我来解答赞 2 收藏

反馈

1 条解答

南宫秀花 Lv1

你后端虽然加了 Access-Control-Allow-Methods: GET, POST, PUT, DELETE，但浏览器发 DELETE 请求时，默认会先发一个 OPTIONS 预检请求，这时候你后端必须对这个 OPTIONS 请求也返回正确的 CORS 头，尤其是 Access-Control-Allow-Methods 和 Access-Control-Allow-Headers。

你前端代码没问题，问题在后端没处理好预检请求。

直接用这个思路排查：

1. 先看 Network 面板里有没有 OPTIONS 请求，状态码是不是 200
2. 如果有 OPTIONS 请求，点开它看 Response Headers 里有没有：
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers（重点！你请求里带了 Content-Type: application/json，预检必须允许这个头）

比如 Node.js 的 Express 用这个中间件试试：

app.use((req, res, next) => {

  res.header('Access-Control-Allow-Origin', '*')

  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')

  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')

  if (req.method === 'OPTIONS') {

    return res.status(200).end()

  }

  next()

})

Java Spring Boot 用 @CrossOrigin 注解也行，但要注意 @CrossOrigin(origins = "*", allowedHeaders = {"Content-Type", ...}, methods = {RequestMethod.DELETE, ...}) 要写全。

别光加 DELETE，预检请求里必须明确允许 Content-Type 这个头，否则浏览器直接拦掉，报错看起来像“method 不支持”，其实是 headers 不对。

2026-02-24 18:15