从react.js从Express.js API获取数据。邮递员的请求正在运行

Question

有人可以帮我一点问题吗？我有Express应用程序，可以完全处理邮递员的请求（添加，删除等）现在，我想使用获取方法将客户端（react.js）与现有API连接。

我有错误：没有“无心”模式

App.js：121 POSThttp://localhost:3000/users/loginnet :: ERR_ABORTED 400（错误请求）

使用“不取芯”模式

无法加载资源：服务器响应状态为400（错误请求）

App.js中的请求

  handleLogInClick = (email, password) => {
email = "[email protected]";
password = "qweasd123";
console.log("Trying to login ");
fetch("http://localhost:3000/users/login", {
  // mode: "no-cors",
  method: "POST",
  headers: {
    Accept: "application/json, text/plain, */*",
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ email: email, password: password }),
  // body:({email:email, password:password})
})
  .then((res) => res.json())
  .then((data) => console.log(data));

};

这是在获取方法中传递主体的问题？还是服务器上的CORS问题？我不知道，也许更有经验的人知道解决此问题的方法。

在node.js中路由

router.post('/users/login', async (req, res) => {
try {
    const user = await User.findByCredentials(req.body.email, req.body.password)
    const token = await user.generateAuthToken()
    res.send({ user, token })
} catch (e) {
    res.status(400).send()
}

}）

邮递员截屏

感谢您的帮助，这是我在StackOverflow上的第一篇文章：]

Answer 1

只需添加，这是默认浏览器行为的快速glance。

CORS或跨源资源共享在现代浏览器中被默认值（在JavaScript API中）

Web应用程序在请求其来源（域，协议或端口）不同的资源时执行跨域HTTP请求。

跨域请求的示例：从https://domain-a.com提供的前端JavaScript代码使用XMLHttpRequest向https://domain-b.com/data.json发出请求。

出于安全考虑，浏览器限制了从脚本发起的跨域HTTP请求。例如，XMLHttpRequest和Fetch API遵循同源策略。

在浏览器上安装this扩展名将有助于解除对CORS的阻止。