已配置Access-Control-Allow-Origin为*为何仍出现CORS跨域错误

排查&解决步骤 #

• 调整CORS配置的位置
  确保这段CORS头设置代码放在所有路由定义、body-parser等其他业务中间件之前，优先级最高。如果放在路由之后，请求匹配到路由直接返回响应，不会执行到你写的头设置逻辑，自然不会携带CORS头。
• 补全OPTIONS预检请求的处理
  浏览器发跨域请求前会先发送OPTIONS预检请求，你当前的配置没有专门处理这类请求，如果后续路由没有匹配OPTIONS方法的规则，会直接返回无CORS头的404响应。修改你的配置如下：

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Request-Method');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
    // 新增：预检请求直接返回200
    if (req.method === 'OPTIONS') {
        return res.sendStatus(200);
    }
    next();
});

• 优先使用官方cors中间件
  手动写CORS配置容易遗漏边界场景，直接用Express官方维护的cors包更稳妥：
  首先安装依赖：

npm install cors

然后替换你自己写的CORS配置代码为：

const cors = require('cors');
// 全局允许跨域
app.use(cors());
// 如果后续需要限制来源、允许凭证，可以改成配置模式：
// app.use(cors({
//   origin: 'https://myfrontendlink.netlify.app',
//   credentials: true
// }));

• 验证后端配置是否生效
  可以本地用curl命令直接请求你的Heroku接口，检查响应头是否携带Access-Control-Allow-Origin字段：

curl -I https://mybackendLink.herokuapp.com/api/upload-image-pub/614f30ce01777500042b0238

如果返回头里没有对应字段，检查是否代码修改后没有推送到Heroku、Heroku构建部署失败，还在运行旧版本代码。

• 排查特殊中间件的拦截情况
  如果你的上传接口用到了multer等文件处理中间件，这类中间件在触发错误（比如文件大小超出限制、格式不符合要求）时会直接返回响应，不会走到后续中间件逻辑。只要把CORS配置放在所有中间件的最顶部，就能避免这类问题。

内容的提问来源于stack exchange，提问作者cherif barry