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

Solution 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 mode: 'no-cors'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, 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.

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