获取 REST API 的请求响应错误

Question

I have built an API and app that uses that API. When I POST method via Postman, it works fine, but when I try fetching it via app, I get a bad request 400 status response. What am I doing wrong?

Here is my JavaScript code:

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))

})

Request

Response

Headers request :

Headers response :

Answer 1

You said:

 mode: 'no-cors',

This is a declaration that you are not doing anything that requires permission be granted with CORS. If you try to do anything that does need permission, it will be silently ignored.

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

Setting the Content-Type header to a value not supported by the HTML form element's type attribute requires permission from CORS. application/json is not such a value.

Consequently, the request is sent as text/plain .

Since it isn't marked as being JSON, the server throws a 400 error.

You need to:

• Remove mode: 'no-cors',
• Make sure that the service you are making the request to will use CORS to grant you permission (or to use a service on the same origin as the request).