Question

我尝试将本地后端与前端连接

   axios({
      method: "post",
      url: "http://localhost:5000/api/user/login",
      withCredentials: true,
      data: {
        email,
        password,
      },
    })
      .then((res) => {
        if (res.data.errors) {
          emailError.innerHTML = res.data.errors.email;
          passwordError.innerHTML = res.data.errors.password;
        } else {
          window.location = "/";
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };

nd Reactjs。后端与邮递员配合得很好，但是当我尝试从前端登录时，在 console.log 中，我收到错误消息“cors 有问题”... 我错过了什么？这是错误信息：从源 'http://localhost:3000' 访问 XMLHttpRequest at 'http://localhost:5000/api/user/login' 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：当请求的凭据模式为“包含”时，响应中“Access-Control-Allow-Origin”标头的值不能是通配符“*”。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。

这里是提交后运行的函数代码

Answer 1

在前端应用的 package.json 中添加代理。

 "proxy": "http://localhost:5000"

下一步而不是 axios 调用中的完整 uri，只需将其称为

axios.post('/user/login')...

现在在后端（节点）目录中使用 npm 添加以下依赖项

npm install cors

现在在主服务器文件中使用它，即 server.js，如下所示

const cors = require('cors')
app.use(cors())

如何连接前后端

1 个答案: