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

Question

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

我有错误： 没有“不取芯”模式

App.js：121 POST http://localhost:3000/users/login net :: ERR_ABORTED 400（错误请求）

使用“无心”模式

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

在App.js中的请求

  handleLogInClick = (email, password) => {
email = "name@gmail.com";
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的阻止。