When using mode: no-cors for a request, browser isn’t adding request header I’ve set in my frontend code

Question

in my React app, I have the following API POST to allow the user to edit their profile (name and image).

  static updateProfile(formData, user_id) {
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
      headers: new Headers({
        'Authorization': getBearerToken()
      }),
      mode: 'no-cors',
      method: "POST",
      body: formData
    });

    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }

The problem with the above is the header with the Authorization token is not being sent in the POST...

How can I get the Authorization header to be send in the fetch request above?

FYI, for non-multipart forms, the authorization token is sent successfully like so:

  static loadProfile(user_id) {
    const request = new Request(`http://localhost:4300/api/v1/profiles/${user_id}`, {
      headers: new Headers({
        'Authorization': getBearerToken(),
        'Accept'       : 'application/json',
        'Content-Type' : 'application/json',
      })
    });

    return fetch(request).then(response => {
      return response.json();
    }).catch(error => {
      return error;
    });
  }

Answer 1

You can’t use no-cors mode if you set any special request headers, because one of effect of using it for a request is that it tells browsers to not allow your frontend JavaScript code to set any request headers other than CORS-safelisted request-headers. See the spec requirements:

To append a name/value pair to a Headers object (headers), run these steps:

5. Otherwise, if guard is "request-no-cors" and name/value is not a CORS-safelisted request-header, return.

In that algorithm, return equates to “return without adding that header to the Headers object”.

Authorization isn’t a CORS-safelisted request-header, so your browser won’t allow you to set if you use no-cors mode for a request. Same for Content-Type: application/json.

If the reason you’re trying to use no-cors mode is to avoid some other problem that occurs if you don’t use, the solution is to fix the underlying cause of that other problem. Because no matter what problem you might be trying to solve, no-cors mode isn’t going to turn out to be a solution in the end. It’s just going to create different problems like what you’re hitting now.

Answer 2

By using below code you can make a fetch request with Authorization or bearer

    var url = "https://yourUrl";
    var bearer = 'Bearer '+ bearer_token;
    fetch(url, {
    method: 'GET',
    withCredentials: true,
    credentials: 'include',
    headers: {
        'Authorization': bearer,
        'X-FP-API-KEY': 'iphone',
        'Content-Type': 'application/json'}
    }).then((responseJson) => {
        var items = JSON.parse(responseJson._bodyInit);
    })
    .catch(error => this.setState({
    isLoading: false,
    message: 'Something bad happened ' + error
    }));