Node.js解决后端CORS跨域问题的终极指南

npm install cors --save

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

// 获取本地IP（可选，用于局域网访问）
const os = require('os');
const localIP = Object.values(os.networkInterfaces())
  .flat()
  .find(iface => iface.family === 'IPv4' && !iface.internal)?.address || '127.0.0.1';
const PORT = 3000; // 后端端口

// 完整CORS配置
const corsOptions = {
  // 允许的源（前端域名/端口）
  origin: [
    `http://localhost:${PORT}`,
    `http://${localIP}:${PORT}`,
    `http://localhost:8080`, // 前端大屏常用端口
    `http://${localIP}:8080`,
    `http://localhost:5173`, // Vite默认端口
    `http://${localIP}:5173`,
    `http://localhost:5500`, // Live Server端口
    `http://${localIP}:5500`
  ],
  credentials: true, // 允许跨域携带Cookie（登录场景必备）
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'], // 允许的HTTP方法
  allowedHeaders: [ // 允许的请求头（覆盖前端常见请求头）
    'Origin', 
    'Content-Type', 
    'Authorization', 
    'Cache-Control', 
    'Pragma', 
    'X-Requested-With'
  ]
};

// 应用CORS中间件
app.use(cors(corsOptions));

// 后续路由、业务逻辑配置...
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

// 开发环境配置（宽松）
const corsOptionsDev = {
  origin: true, // 允许所有源（开发阶段便捷）
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: '*' // 允许所有请求头（仅开发环境使用）
};

// 生产环境配置（严格）
const corsOptionsProd = {
  origin: [
    'https://yourdomain.com', // 生产前端域名
    'https://www.yourdomain.com'
  ],
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: [
    'Origin', 'Content-Type', 'Authorization', 
    'Cache-Control', 'Pragma', 'X-Requested-With'
  ]
};

// 根据环境变量切换配置
const corsOptions = process.env.NODE_ENV === 'production' 
  ? corsOptionsProd 
  : corsOptionsDev;

app.use(cors(corsOptions));

const corsOptions = {
  origin: (origin, callback) => {
    // 开发环境：允许所有localhost/127.0.0.1来源（无origin为Postman等工具）
    if (process.env.NODE_ENV === 'development') {
      if (!origin || origin.includes('localhost') || origin.includes('127.0.0.1')) {
        return callback(null, true);
      }
    }

    // 生产环境：严格白名单
    const allowedOrigins = [
      'https://yourdomain.com',
      'https://test.yourdomain.com' // 测试环境
    ];

    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true); // 允许跨域
    } else {
      callback(new Error('Not allowed by CORS')); // 拒绝跨域
    }
  },
  credentials: true,
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: ['Origin', 'Content-Type', 'Authorization', 'Cache-Control', 'Pragma']
};

app.use(cors(corsOptions));

app.use(cors({
  origin: '*', // 允许所有源
  methods: '*', // 允许所有方法
  allowedHeaders: '*' // 允许所有请求头
}));

app.use((err, req, res, next) => {
  if (err.message === 'Not allowed by CORS') {
    console.error(`CORS错误：${req.headers.origin} 未被允许`);
    res.status(403).json({ code: 403, msg: '跨域访问被拒绝' });
  } else {
    next(err);
  }
});