Express.js跨域请求被CORS策略拦截问题求助

方法一：使用cors中间件（推荐） #

这是最简便且规范的处理方式，也是Express官方推荐的方案。

1. 先安装cors包：

npm install cors

2. 在Express应用中引入并配置：

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

// 仅允许指定前端域名访问（生产环境推荐）
app.use(cors({
  origin: 'https://samplesite.com'
}));

// 开发环境可临时允许所有域名访问（生产环境禁用）
// app.use(cors());

// 处理表单提交的路由
app.post('/sample', (req, res) => {
  // 你的业务逻辑
  res.send('数据接收成功');
});

app.listen(3000, () => {
  console.log('服务器运行中');
});

方法二：手动配置响应头（无需第三方包） #

如果不想依赖中间件，可以手动添加CORS相关响应头，同时必须处理预检OPTIONS请求：

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

// 全局处理CORS规则
app.use((req, res, next) => {
  // 允许指定前端域名跨域
  res.setHeader('Access-Control-Allow-Origin', 'https://samplesite.com');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // 允许的请求头（根据表单实际需求调整）
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理预检OPTIONS请求，直接返回200状态
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }

  next();
});

// 解析表单提交的urlencoded格式数据
app.use(express.urlencoded({ extended: true }));

app.post('/sample', (req, res) => {
  console.log('收到表单数据：', req.body);
  res.send('数据已接收');
});

app.listen(3000, () => {
  console.log('服务器启动完成');
});

关键注意事项 #

• 生产环境禁止直接使用app.use(cors())开放所有域名，必须指定具体的前端域名，避免安全风险。
• 若前端Fetch请求包含自定义头或非简单请求（比如POST传JSON），必须确保服务器正确处理OPTIONS预检请求。
• 不要随意设置mode: 'no-cors'，这种模式下无法读取响应内容，仅适用于不需要获取返回值的场景。

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