本地开发Web应用与API遭遇CORS拦截问题求助

嘿，我来帮你捋清楚这个CORS问题！你遇到的情况其实是因为服务器的启动方式不对，导致你的CORS配置根本没生效，尤其是浏览器的预检请求（Preflight Request）没被正确处理。先给你拆解问题，再给你改好的代码，最后用大白话解释为啥会这样。

问题出在哪？ #

你现在的服务器启动代码绕开了Express的核心处理逻辑，直接把Router挂到了原生的http.createServer()上。这种写法有两个致命问题：

• Express的Router不会自动处理浏览器发送的OPTIONS预检请求，而你的POST请求带了Content-Type: application/json，属于非简单请求，浏览器必须先发送OPTIONS请求确认权限。
• 你路由里的cors()中间件和手动设置的res.header，在这种错误的启动方式下，根本没机会被执行到——因为请求没经过Express的正常处理流程。

Postman能正常访问是因为它不会发送预检请求，也不检查CORS响应头；但浏览器会严格遵循CORS规则，所以直接报错了。

修复方案 #

我们需要用正确的Express方式启动服务器，让CORS中间件和路由正常工作：

1. 修改路由模块（posttest.js） #

把路由改成标准的Express Router写法，不用手动加res.header（cors()中间件会帮你处理所有必要的头）：

const express = require('express');
const cors = require('cors');
const router = express.Router();

router.post('/posttest/', cors(), async (req, res, next) => {
  res.json({ msg: 'WHOAH with CORS it works!' });
});

module.exports = router;

2. 修复服务器启动代码 #

用Express的app实例来处理请求，而不是直接挂Router到原生http服务器：

const express = require('express');
const posttestRouter = require('./src/routes/posttest.js');

// 创建Express应用实例
const app = express();

// 可选：如果想让所有路由都启用CORS，直接全局挂载cors中间件
// app.use(cors());

// 挂载你的路由
app.use(posttestRouter);

// 启动服务器
const server = app.listen(3000, () => {
  console.log('Listening on port 3000!');
});

server.on('error', () => {
  console.log('ERROR!!!!');
});

大白话解释预检请求 #

为啥浏览器这么麻烦？其实是为了安全——它怕你不小心发了跨域的敏感请求（比如改数据的POST）。对于像"POST带JSON内容"这种非简单请求，浏览器会先给服务器发一个OPTIONS请求，相当于问：

"我是来自localhost:8080的，能不能给你发POST请求，还带JSON格式的数据呀？"

服务器得明确回复："可以，允许你的源、允许POST方法、允许Content-Type头"，浏览器才会发真正的POST请求。你之前的服务器根本没处理这个OPTIONS请求，所以浏览器收到的响应里没有任何允许跨域的头，直接就把请求拦截了。

现在改完代码后，Express会自动处理OPTIONS预检请求，cors()中间件会帮你设置所有必要的响应头，浏览器就不会拦你的请求啦。

内容的提问来源于stack exchange，提问作者PAT-O-MATION