node.js - CORS预检 channel 未成功，React to Express

Question

当通过 CORS 从我的 React 应用程序发送请求到我的 Node.JS 和 Express.js 后端时，我得到一个:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3001/students/login. (Reason: CORS preflight channel did not succeed).

我使用 axios 发送请求，这是请求配置:

({ email, password }) => {
        return axios.post(API_ENDPOINT + UCENIK.post.login,
            { email, password },
            {
                withCredentials: true,
                Headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
    }

我尝试在 Express 中使用这些 header 允许 CORS:

app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization')");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    next();
});

编辑:使用 npm Cors 模块修复并提供此对象进行设置:

{
    origin: 'http://localhost:3000',
    cors: true
}

Answer 1

我认为这只是一个开发问题，因为您的express实例和reactjs前端服务器运行在不同的端口上。在生产环境中情况可能并非如此。

不要在开发周期中使用 CORS，而是尝试将请求从前端服务器代理到 Express 服务器。

例如，webpack devserver 有一个单独的代理配置 https://webpack.js.org/configuration/dev-server/#devserver-proxy