React 和 NodeJS 跨源请求被阻止

Question

我刚开始使用 React 和 NodeJS。我创建了一个服务器端 NodeJS 应用程序，我正在尝试使用 Axios 从我的 React 应用程序发送 HTTP 请求。

服务器是运行端口 8080 app.listen(process.env.PORT || 8080);

我的服务器控制器：

const User = require('../models/Users');
const UserModel = new User();

exports.login = async (req, res, next) => {
    const email = req.params.email;
    const password = req.params.password;
    const login = await UserModel.getUserLogin(email, password);
    res.status(202).send(JSON.stringify(login));
};

我的 React 应用程序是默认的 http://localhost:3000

这里是我调用服务器的地方：

axios.get(Constants.SERVERURL + 'user/' + this.state.email + '/' + this.state.password,
    { crossDomain: true }
  ).then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  });

Constants.SERVERURL 是 export const SERVERURL = "http://localhost:8080/";

它returns错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/user/email@test.com/123. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

如何避免跨域问题？

谢谢

Answer 1

您应该将 proxy 添加到 package.json，因为我记得这是解决 CORS 问题的最常见解决方案。

{
   proxy: "localhost:8080"
}

额外的事情是安装 cors 包并将其作为中间件添加到您的快速服务器，您可以通过以下方式进行。

const cors = reqiure("cors")

app.use(cors())

React 和 NodeJS 跨源请求被阻止

React and NodeJS Cross-Origin Request Blocked

cross-domain

node.js

reactjs