为什么Vue的POST请求触发OPTIONS预检却报403禁止访问？

夏侯司卿提问于 2026-02-19 02:07:26 阅读 31

安全

我在Vue项目里用axios发POST请求给后端接口，控制台突然跳出CORS错误，显示OPTIONS请求返回了403。明明之前GET请求没问题啊，搞不懂为啥这次要先发OPTIONS？

代码就是简单的表单提交：

<script>
export default {
  methods: {
    submitForm() {
      axios.post('/api/upload', { name: 'test' }, {
        headers: { 'X-Custom-Header': 'vue-app' }
      })
      .catch(err => console.log(err));
    }
  }
}
</script>

试过在请求头里删掉自定义字段，发现这样就不会触发OPTIONS，但业务需要这个头。后端说已经配置了Access-Control-Allow-Origin，但就是拦截OPTIONS请求…

CORS安全

我来解答赞 7 收藏

反馈

1 条解答

爱学习的悦弘 Lv1

这个问题我之前踩过坑，说白了就是CORS预检请求没处理好。咱们先捋一下原因：你发POST请求时加了个自定义头 X-Custom-Header，这在CORS规范里属于“复杂请求”，浏览器会先发一个OPTIONS请求确认服务器是否允许跨域。如果后端没正确处理OPTIONS请求，就会返回403，导致你的POST请求直接失败。

别急着改前端代码，问题主要出在后端配置上。虽然后端说配了 Access-Control-Allow-Origin，但可能忽略了OPTIONS请求的处理。你需要让后端明确针对OPTIONS请求放行，比如设置响应头 Access-Control-Allow-Methods: POST, OPTIONS 和 Access-Control-Allow-Headers: X-Custom-Header。这两个头很重要，前者告诉浏览器允许哪些HTTP方法，后者声明支持的自定义头。

如果你用的是Nginx做反向代理，可以加上类似这样的配置：



if ($request_method = 'OPTIONS') {

    add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";

    add_header Access-Control-Allow-Headers "X-Custom-Header";

    return 204;

}

如果是Node.js后端，可以用中间件处理：



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

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

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

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

        res.header('Access-Control-Allow-Headers', 'X-Custom-Header');

        return res.sendStatus(204);

    }

    next();

});

最后提醒一点，调试时别忘了清浏览器缓存或者用隐身模式，不然可能会被之前的CORS策略干扰，搞得你怀疑人生。别走弯路，重点盯住后端的OPTIONS处理逻辑。

2026-02-19 02:11