5

I am doing Ajax calls with CORS headers. The short version is that in Firefox, it all works nicely, in Chrome I get an error: "Refused to set unsafe header Access-Control-Request-Method", and the same thing for Access-Control-Request-Headers.

So, I am just confused. Like, very confused. What is it that I have to do in order to make CORS work properly in both Chrome and Firefox?

The weird part I will say, though, is that it seems that despite the error, Chrome does execute the Ajax call.

I am just confused overall, I'm new to JavaScript and very new to CORS, just trying to make this work.

PS - all of this is local development through IntelliJ, not sure but that might be a factor.

PPS. Short summary: everything works nicely in Firefox, I get errors in Chrome but it still executes the request properly.

PPPS. Here's the code I'm using for all my Ajax calls.

function(uri, method, json){
    return $.ajax({
        url: orgProps.serverOrigin + ensurePrecedingSlash(uri),
        type: method,
        headers: (function(){
            var result = {
                "Access-Control-Request-Headers": [
                    "X-Requested-With",
                    "Authorization"
                ],
                "Access-Control-Request-Method": method
            };

            var token = jwt.getToken();
            if(token !== undefined && token !== null){
                result.Authorization = restoreBearerPrefix(token);
            }
            return result;
        })(),
        contentType: "application/json; charset=utf-8",
        data: (function(){
            if(json !== undefined) {
                return JSON.stringify(json);
            }
            return null;
        })()
    })
    .done(function(data, status, jqXHR){
        var token = jqXHR.getResponseHeader("Authorization");
        jwt.storeToken(token);
    });
vinS
  • 1,417
  • 5
  • 24
  • 37
craigmiller160
  • 5,751
  • 9
  • 41
  • 75
  • Is `url` at `$.ajax()` request `file:` protocol? – guest271314 Dec 10 '16 at 21:41
  • Chrome is just adhering to the [spec](https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#dom-xmlhttprequest-setrequestheader) which tells it to terminate if you try to set those headers. The browser is should deal with those – Patrick Evans Dec 10 '16 at 21:47
  • As for why it still works is because the message just tells you it isn't going to set that header, and will instead do it itself – Patrick Evans Dec 10 '16 at 21:57
  • @PatrickEvans Have you considered posting your comments at an Answer? – guest271314 Dec 10 '16 at 22:31
  • Possible duplicate of [How does Access-Control-Allow-Origin header work?](http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) – guest271314 Dec 10 '16 at 22:42
  • @PatrickEvans thank you for your replies. Are there recommendations for writing multi-browser code in this case? Or is it just recommended to not set the request headers at all? – craigmiller160 Dec 11 '16 at 00:09

0 Answers0