如何在Node.js中配置CORS解决React本地跨域请求报错问题

你的报错核心是请求地址缺少协议头触发的协议校验失败，同时后端CORS配置存在小瑕疵，按以下步骤修复即可：

1. 优先修复前端请求地址（直接解决当前报错） #

React代码里的axios请求没有加http://协议头，浏览器无法识别为合法的HTTP请求，触发了协议规则校验。
修改React端runInstance方法里的请求代码：

// 原错误代码
axios.get(`localhost:3001/app`)
// 修改为
axios.get(`http://localhost:3001/app`)

2. 修复后端CORS配置瑕疵 #

你当前的CORS配置存在3处不规范问题，可能导致后续跨域校验失败：

• corsOptions里的origin末尾多了多余的斜杠，CORS Origin是严格匹配规则，需要和前端实际Origin完全一致
• 同时使用了cors中间件和自定义响应头中间件，二者重复配置会引发冲突
• 配置参数名拼写错误，optionSuccessStatus应为optionsSuccessStatus（多一个s）

修改后Node端完整代码如下：

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

const corsOptions = {
    origin: 'http://localhost:3000', // 去掉末尾斜杠
    credentials: true,
    optionsSuccessStatus: 200 // 修正拼写错误
}

app.use(cors(corsOptions));
// 删掉你手写的那一段自定义响应头中间件，cors中间件已经自动处理了所有跨域头

app.use(express.json());

app.get('/app', (req, res) => {
    res.send({result: "hello"});
});

module.exports = app;

3. 验证生效 #

修改完成后重启Node后端服务，刷新前端页面即可正常请求接口。

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