Problem with changing request headers in Firefox using AngularJS

Question

My backend requires the Content-Type request header to be exactly "application / json". This is a CORS request, and everything works fine in Chrome. The exact title from the source of the developer network tab:

Content-Type: application/json 

I installed this in AngularJS with $ http.default.headers.post and it works fine in Chrome. However, this does not work in Firefox. Firefox sends this instead:

 Content-Type: application/json; charset=UTF-8 

I tried changing the headers to:

• $ http.default.headers settings (for .post, .common)
• custom headers for a single request
• using the $ http interceptor

All of these methods work well in Chrome, but not in Firefox. The request contains data .

If I delete the "Content-Type" header all together, it is still sent, but then this:

 Content-Type: text/plain; charset=UTF-8 

(this happens in both Chrome and Firefox).

It makes me think that the browser is forcing the header :) How can I get around this in Firefox?

Answer 1

Firefox has charset=UTF-8 hard-coded for line downloads .

However, you can send Blob :

 var r = new XMLHttpRequest(); r.open("POST", ...); r.send(new Blob( [JSON.stringify({a:1})], {type:"application/json"} )); 

This also works great with the angular $http XHR wrapper:

 $http({ method: "POST", url: "/echo/json", headers: { "Content-Type": "application/json" }, data: new Blob([JSON.stringify({ a: 1 })]) }); 

Fiddle