Node.js中CORS跨域配置多次尝试均不生效问题求助

你代码中存在的核心问题 #

• 错误1：CORS是响应头规则，需要设置在res响应对象上，你错误写到了req请求对象上，浏览器完全识别不到设置的规则
• 错误2：corsOptions的origin参数配置错误，该参数需要填前端页面的访问地址，而非你后端接口本身的地址
• 错误3：你注释了生效的cors中间件调用，自定义的CORS中间件没有处理OPTIONS预检请求，也没有实际设置响应头，完全不生效
• 错误4：CORS中间件要放在所有路由定义之前，否则请求到路由时还没设置头就会返回报错

修复方案（两种二选一即可） #

方案1：使用cors包（推荐，兼容性最好） #

首先确保你已经安装了cors包：npm i cors

const app = express();
const cors = require('cors');

// CORS配置要放在所有中间件和路由的最前面
const corsOptions = {
  // 这里替换成你实际的前端访问地址，比如前端跑在3000端口就写这个
  origin: 'http://localhost:3000',
  methods: 'GET,PUT,POST,DELETE,OPTIONS',
  allowedHeaders: 'Content-Type, Accept, Authorization',
  // 如果需要跨域传cookie/Authorization凭证就加下面这行，不需要可以删除
  credentials: true,
  optionsSuccessStatus: 200,
};
app.use(cors(corsOptions));
app.options('*', cors(corsOptions));

// 其他中间件
app.use(express.json());
app.use(morgan('dev'));

// API routes
app.get('/api/v1/', (req, res) =>
  res.status(200).json({ message: "Welcome to the Radical's API" })
);

如果需要允许多个前端域名，可以把origin改成校验函数：

const allowOrigins = ['http://localhost:3000', 'http://127.0.0.1:5173'];
const corsOptions = {
  origin: (origin, callback) => {
    // !origin是兼容postman等本地调试工具的无来源请求
    if (allowOrigins.includes(origin) || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  }
}

方案2：不用第三方包，手动实现CORS中间件 #

const app = express();

// CORS中间件放在最前面
app.use('*', (req, res, next) => {
  // 替换成你的前端地址，生产环境不要写*
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization');
  // 有跨域传凭证需求加下面这行
  res.header('Access-Control-Allow-Credentials', 'true');
  // 单独处理OPTIONS预检请求直接返回成功
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 其他中间件
app.use(express.json());
app.use(morgan('dev'));

// API routes
app.get('/api/v1/', (req, res) =>
  res.status(200).json({ message: "Welcome to the Radical's API" })
);

内容的提问来源于stack exchange，提问作者Ahsan Danish