如何解决Express中Access-Control-Allow-Origin问题及后续无限循环问题？

嘿，我一眼就揪出问题所在了——你的CORS中间件写法出错，直接导致请求卡住，看起来像无限循环！

问题根源 #

你写的这段中间件代码有两个致命问题：

app.use(function(res){
 res.header('Access-Control-Allow-Origin', "http://localhost:5001");
 res.header('Access-Control-Allow-Mehods', 'GET, PUT, POST, DELETE');
 res.header('Access-Control-Allow-Headers', 'Content-Type');
});

• Express中间件的参数顺序必须是**req, res, next**，你只传了res，后续的路由永远无法被执行，请求会一直挂在这个中间件里，表现出来就是类似无限循环的现象
• 还有个拼写错误：Access-Control-Allow-Mehods应该是Access-Control-Allow-Methods（少了个t），这个错误会让你的请求方法授权完全不生效

修复方案 #

方案1：手动修正中间件

把中间件改成正确写法，补上req和next参数，最后一定要调用next()让请求继续流转：

app.use(function(req, res, next){
 res.header('Access-Control-Allow-Origin', "http://localhost:5001");
 res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE'); // 修正拼写错误
 res.header('Access-Control-Allow-Headers', 'Content-Type');
 next(); // 必须调用这个，请求才能到达后续路由
});

方案2：使用官方推荐的cors包（更省心）

手动写CORS头很容易踩坑，不如直接用Express官方推荐的cors包，步骤如下：

1. 先安装包：

npm install cors

2. 在index.js里引入并配置使用：

const express = require('express');
const cors = require('cors'); // 引入cors包
const app = express();

// 配置CORS规则，只允许http://localhost:5001访问
const corsOptions = {
  origin: 'http://localhost:5001',
  methods: ['GET', 'PUT', 'POST', 'DELETE'],
  allowedHeaders: ['Content-Type']
};
app.use(cors(corsOptions)); // 启用cors中间件

app.use(express.json());

// 后续路由挂载
const users = require('./api/user');
app.use('/users', users);
const user_has_question_response = require('./api/user_has_question_response');
app.use('/user_has_question_response', user_has_question_response);
const question = require('./api/question');
app.use('/question', question);
const response = require('./api/response');
app.use('/response', response);

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on port ${port}...`));

这样既避免了手动写头的拼写失误，也不会忘记调用next()，能完美解决你的问题！

内容的提问来源于stack exchange，提问作者Malaury Boudon