不使用cors模块时fetch跨域报错及客户端修复相关问题咨询

1. 为什么POST请求缺失Access-Control-Allow-Origin头 #

你遇到的现象本质是自定义CORS中间件的执行顺序和逻辑缺陷导致的，核心原因有两个：

• 中间件挂载顺序错误：自定义的CORS中间件必须放在所有app.get、app.post等业务路由定义的最顶部。如果先写了业务路由再挂载CORS中间件，POST请求匹配到路由后会直接执行业务逻辑返回响应，不会再走后面的中间件加CORS头；而OPTIONS请求没有匹配到对应的业务路由，才会走到你写的中间件，所以会出现只有预检请求带CORS头、POST请求不带的情况。
• 没有单独处理OPTIONS预检请求：预检请求不需要走后续业务逻辑，应该单独处理直接返回，避免后续逻辑干扰头信息。

修正后的CORS中间件代码如下，必须放在所有路由的最前面：

// 所有业务路由定义前先挂载这个中间件
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    // 单独处理预检请求，直接返回
    if (req.method === 'OPTIONS') {
        return res.sendStatus(204);
    }
    next();
});

// 后面再写你的业务路由，比如：
// app.post('/storeScore', ...)
// app.get('/createTable', ...)

另外请检查业务路由内部有没有手动修改Access-Control-Allow-Origin相关的响应头，避免覆盖全局配置。

2. 客户端不需要额外配置请求头 #

你当前的前端fetch代码完全符合要求，不需要手动加Origin头，浏览器会自动携带该请求头，手动添加反而可能触发额外的预检规则。

3. 自动调用接口路由的实现方法 #

不需要手动访问地址触发路由逻辑，可以直接把对应逻辑抽离为公共函数，在服务启动时自动执行：

1. 先把路由对应的业务逻辑抽成单独函数：

// 抽离建表的公共逻辑
const createTableFunc = async () => {
    // 这里写原来的建表SQL执行逻辑
}

2. 在服务启动回调里直接调用该函数：

app.listen(3000, async () => {
    console.log('服务已启动在3000端口');
    // 服务启动时自动执行建表逻辑，无需手动访问接口
    await createTableFunc();
    console.log('表初始化完成');
})

// 也可以保留原来的路由，方便后续手动触发调试
app.get('/createTable', async (req, res) => {
    await createTableFunc();
    res.send('建表成功');
})

如果是要调用其他服务的接口，也可以在后端用Node内置的http模块发请求调用，不需要手动在浏览器地址栏输入地址。

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