Backend returns

Access-Control-Allow-Headers: *

I have a request like

fetch('url-here', {
    // ...
    headers: {
        'X-Auth': token,
    }
})

It works in Chrome but for Firefox I'm getting

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: missing token ‘X-Auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: CORS request did not succeed)

Backend returns

Access-Control-Allow-Headers: *

I have a request like

fetch('url-here', {
    // ...
    headers: {
        'X-Auth': token,
    }
})

It works in Chrome but for Firefox I'm getting

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: missing token ‘X-Auth’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).[Learn More] Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <...cut...>. (Reason: CORS request did not succeed)

• javascript
• cors

• 1 Might be related to this: stackoverflow./questions/24371734/… – Rence Commented Feb 13, 2019 at 9:31
• 1 @Sirence or this: stackoverflow./questions/52750589/… – skyboyer Commented Feb 13, 2019 at 9:32
• 2 Important note: when responding to a credentialed request, server must specify a domain, and cannot use wild carding: developer.mozilla/en-US/docs/Web/HTTP/… – Rence Commented Feb 13, 2019 at 9:34
• Watch my answer in below url : stackoverflow./questions/56556415/… – Sahil Bhalla Commented Oct 7, 2019 at 5:22

1 Answer 1

The problem is, some browsers don’t yet allow * wildcards for Access-Control-Allow-Headers. Notably, Firefox 69 and earlier doesn’t. See https://bugzilla.mozilla/show_bug.cgi?id=1309358.

So to ensure you get expected behavior in all browsers, the Access-Control-Allow-Headers value you send back should explicitly list all the header names you actually need to access from your frontend code; e.g., for the case in the question: Access-Control-Allow-Headers: X-Auth.

One way you can make that happen without needing to hardcode all the header names is: Have your server-side code take the value of the Access-Control-Request-Headers request header the browser sends, and just echo that into the value of the Access-Control-Allow-Headers response header your server sends back.

Or else use some existing library to CORS-enable your server. Echoing the Access-Control-Request-Headers request-header value into the Access-Control-Allow-Headers response-header value is something most CORS libraries will typically do for you.