提取REST API的错误请求响应

Question

我已经构建了一个API和使用该API的应用。当我通过Postman使用POST方法时，它可以正常工作，但是当我尝试通过应用程序获取它时，却收到了错误的请求400状态响应。我在做什么错了？

这是我的JavaScript代码：

const myForm = document.getElementById('loginForm');

myForm.addEventListener('submit', function(e) {
  e.preventDefault();

  const url = 'https://thawing-peak-69345.herokuapp.com/api/auth';

  const myHeaders = new Headers();
  myHeaders.append('Accept', 'application/json, text/html, */* ');
  myHeaders.append('Content-Type', 'application/json, charset=utf-8')


  const formData = {
    email: this.email.value,
    password: this.password.value
  };


  console.log(formData);

  const fetchOptions = {
    method: 'POST',
    mode: 'no-cors',
    cache: 'no-cache',
    headers: myHeaders,
    body: JSON.stringify(formData)
  };

  fetch(url, fetchOptions)
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.log(err))

})

请求

回复

标题请求：

标题回复：

Answer 1

您说：

mode: 'no-cors',

这是一个声明，表明您没有做任何需要获得CORS许可的操作。如果您尝试做任何需要许可的事情，它将被静默忽略。

myHeaders.append( 'Content-Type', 'application/json, charset=utf-8')

将Content-Type标头设置为HTML form元素的type属性不支持的值需要获得CORS的许可。 application/json不是这样的值。

因此，请求以text/plain的形式发送。

由于未将其标记为JSON，因此服务器会引发400错误。

您需要：

• 删除mode: 'no-cors',
• 请确保您正在请求的服务将使用CORS授予您权限（或使用与请求源相同的服务）。