CODEWITHSUNDEEP
firefox
Boycott Russia
Boycott Russia

Reputation: 12107

Firefox fetch refuses to send custom headers

Googled for an hour, but cannot find any hints to what I'm missing here.

This fiddle works fine in Chrome, but Firefox is not even trying to send the OPTIONS request.

fetch("http://localhost:8080/mutate?commitNow=true", {
  method: "POST",
  body: '{"set": { "name": "Alice" }}',
  //headers: {"Content-Type": "application/json"},
  headers: [ ["Content-Type", "application/json"] ]
})

There's no network request fired in firefox de tools and I've confirmed that the server does not receive any requests. In Chrome same fiddle does send preflight and the request. If I comment out the custom headers it starts to work fine in Firefox too. But I need to set content-type.

How do I make Firefox send custom headers with CORS fetch?

Error message in console is:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/mutate?commitNow=true. (Reason: CORS request did not succeed).

This message isn't helpful because request wasn't even attempted (see above)

Upvotes: 2

Views: 480

Answers (2)

Lucas Besnard
Lucas Besnard

Reputation: 1

You need to add the header "Access-Control-Allow-Headers: content-type" in your server response

Upvotes: 0

Nickolay
Nickolay

Reputation: 32063

Apparently Firefox silently blocks requests from https:// to http://

After I changed the code to use fetch("https://localhost:8080, I see the OPTIONS request, as expected.

Upvotes: 1

Related Questions