从客户端向Express服务器发送POST请求时出现CORS错误

问题诊断 #

从报错信息来看，尽管你配置了CORS中间件，但浏览器发送的预检请求（OPTIONS）未得到正确响应，导致请求被拦截。另外还有两个关键细节需要注意：

1. 你的Express服务器监听7000端口，但客户端请求的是https://www.teckwithfeya.com/send（无端口），说明域名可能未正确反向代理到7000端口，客户端请求根本没到达你的Express服务器，自然不会返回CORS头。
2. 使用FormData发送请求时，默认Content-Type为multipart/form-data，但你仅配置了express.json()，无法解析该格式的请求体（这是请求体解析问题，非CORS直接原因，但会影响后续业务逻辑）。

修复步骤 #

1. 确保域名与服务器端口正确映射 #

如果Express服务器运行在7000端口，需通过Nginx等反向代理工具，将https://www.teckwithfeya.com/send转发到http://localhost:7000/send，否则客户端请求无法到达你的Express服务。

2. 完善CORS配置，处理预检请求 #

修改CORS配置，确保预检请求被正确处理，同时允许必要的请求方法和头：

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

// 配置CORS规则
app.use(cors({
  origin: 'https://www.teckwithfeya.com',
  methods: ['GET', 'POST', 'OPTIONS'],
  allowedHeaders: ['Content-Type']
}));

// 专门处理OPTIONS预检请求，直接返回200
app.options('*', cors());

3. 解析FormData格式的请求体 #

express.json()无法解析multipart/form-data，需使用multer中间件处理：
首先安装multer：

npm install multer

然后修改服务器代码：

const multer = require('multer');
// 仅解析FormData字段，不保存上传文件
const upload = multer({ storage: multer.memoryStorage() });

// 在POST路由中使用upload中间件解析FormData
app.post("/send", upload.none(), (req, res) => {
  console.log(req.body); // 现在可以正常获取表单字段
  res.send("Form submitted successfully");
});

4. 验证请求地址一致性 #

确保客户端请求地址与服务器配置的origin完全一致，避免http/https混用、端口遗漏等情况。

测试验证 #

修改完成后重启Express服务器，重新提交表单，检查浏览器控制台是否仍有CORS错误，同时查看服务器控制台是否能正常打印req.body内容。

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