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

问题

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

回答1:

You can’t use mode: 'no-cors' if you want set any special request headers, because one of the effects 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 (name/value) pair to a Headers object (headers), run these steps:

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 mode: 'no-cors'for a request. Same for Content-Type: application/json.

If the reason you’re trying to use mode: 'no-cors' 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 in general no matter what problem you might be trying to solve, mode: 'no-cors' 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.

回答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
    }));

来源：https://stackoverflow.com/questions/44747874/when-using-mode-no-cors-for-a-request-browser-isn-t-adding-request-header-i-ve

标签

javascript

reactjs

cors

fetch-api