为什么浏览器发送的POST请求变成了OPTIONS？

一丽君提问于 2026-03-26 20:43:19 阅读 83

前端

我在用 fetch 发送 POST 请求到后端接口，结果浏览器自动先发了个 OPTIONS 请求，而且我的 POST 根本没发出去，这是为啥？

我试过加了 Content-Type: application/json，但还是触发了预检请求。后端也没收到我的数据，控制台只看到 OPTIONS 返回 204。

这是我的请求代码：

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'test' })
})

HTTP协议

我来解答赞 12 收藏

反馈

2 条解答

宇文福萍 Lv1

这很正常啊，这是浏览器的跨域预检请求。简单来说就是你前端和后端不在同一个域名下，浏览器为了安全要先发个 OPTIONS 请求确认一下。

要解决这个问题，后端需要处理这个 OPTIONS 请求，在响应头里加些东西。给你个 node.js 的例子，直接复制过去试试：



const cors = (req, res, next) => {

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

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

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

  

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

    return res.status(200).end();

  }

  next();

};

// 在你的路由中间件加上这个

app.use(cors);

记得把 '*' 改成你前端的实际域名会更安全点。后端做好这些，再试下你的 fetch 请求就能正常发送了。熬夜写代码真累，希望能帮到你。

2026-03-31 13:23

端木珮青 Lv1

这叫跨域预检请求，浏览器对非简单请求都会先发个 OPTIONS 检查权限。你这个 Content-Type: application/json 就触发了它。

要解决就让后端加 CORS 头，复制这个：

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

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

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

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

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

    return res.sendStatus(200)

  }

  next()

})

前端不用改，就这样发请求就行。后端处理完 OPTIONS 后，浏览器就会接着发你的 POST。记得后端要支持 CORS 哦，不然还得继续折腾。

我以前也被这玩意整疯过，浏览器非要多此一举，不过现在都习惯了，复制粘贴这几行就完事。

2026-03-26 21:08