为什么设置了Access-Control-Allow-Origin却还是出现CORS错误？

a'ゞ菲菲提问于 2026-01-27 09:01:24 阅读 39

安全

我用Express写了后端API，设置了app.use(cors())，但前端调POST接口时还是报错“No ‘Access-Control-Allow-Origin’ header present”。明明已经引入了cors模块啊，哪里出问题了？

尝试过直接在响应头写res.header(“Access-Control-Allow-Origin”, “*”)，但POST请求还是会卡在预检OPTIONS阶段。控制台只显示OPTIONS请求404，实际POST接口路径明明是正确的…

代码贴出来看看：
<pre class="pure-highlightjs line-numbers"><code class="language-javascript"><code class="language-javascript">const cors = require('cors');
app.use(cors({origin: 'http://localhost:3000'}));

// 接口路由在后面
app.post('/api/upload', (req, res) => {
  res.send('ok');
});
</code></code></pre>

我来解答赞 9 收藏

反馈

2 条解答

Newb.曦月 Lv1

问题出在中间件顺序上。Express的中间件是有执行顺序的，你用了app.use(cors())但后面才定义路由，导致OPTIONS预检请求没经过CORS中间件。代码给你：

const cors = require('cors');

app.use(cors({origin: 'http://localhost:3000'}));



// 把路由放在这里之后才对

app.post('/api/upload', (req, res) => {

  res.send('ok');

});

或者更明确点写成：

app.use(cors({origin: 'http://localhost:3000'}));

app.use(bodyParser.json()); // 假设你用了bodyParser

app.use('/api', apiRouter); // 所有路由都要放在cors中间件之后

OPTIONS预检请求是浏览器自动发的，这时候你的路由还没走到cors中间件，所以返回的响应头里没有CORS相关字段，自然就卡住了。把cors中间件放在所有路由之前就对了。这坑我踩过无数次，记住中间件顺序真的很重要。

2026-02-07 08:17

司徒芸菡 Lv1

问题出在你的路由顺序上。Express处理请求是按照代码定义的顺序来的，而CORS中间件虽然你设置了，但如果预检请求（OPTIONS）直接匹配不到对应路由，就会返回404，导致CORS头根本没机会设置。

可以优化成这样：

const cors = require('cors');

const express = require('express');

const app = express();



// 先引入CORS中间件

app.use(cors({ origin: 'http://localhost:3000' }));



// 明确处理OPTIONS请求，避免404

app.options('/api/upload', cors()); 



// 接口路由

app.post('/api/upload', (req, res) => {

  res.send('ok');

});



app.listen(5000, () => {

  console.log('Server running on port 5000');

});

关键是加了 app.options 这一行，显式处理OPTIONS请求。不然Express找不到对应的路由时，会直接返回404，连CORS头都来不及设置。这种坑我以前也踩过，写API的时候确实要特别注意请求顺序和预检逻辑。

2026-01-30 09:00