11

The AJAX request works fine, but the moment I add a header via beforeSend or headers, an OPTIONS pre-flight request is made and the GET request is aborted. 

  Code: $.ajax({
        type: "GET",
        crossDomain: true,
         beforeSend: function (xhr)
         {
         xhr.setRequestHeader("session", $auth);
         },
        url: $url,
        success: function (data) {
            $('#something').html(data);
        },
        error: function (request, error) {
            $('#something').html("<p>Error getting values</p>");
        }
    });

Similar AJAX Request w/o headers specified (the moment I add/modify header, an OPTIONS call is made)

Request GET /api/something?filter=1 HTTP/1.1
Referer http://app.xyz.dj/dashboard
Accept  application/json, text/javascript, */*; q=0.01
Accept-Language en-US
Origin  http://app.xyz.dj
Accept-Encoding gzip, deflate
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; MASMJS; rv:11.0) like Gecko
Host    162.243.13.172:8080
DNT 1
Connection  Keep-Alive
Cache-Control   no-cache

Similar Server Response Header (for GET request)

Response    HTTP/1.1 200 OK
Server  Apache-Coyote/1.1
Access-Control-Allow-Origin *
Access-Control-Allow-Methods    GET, POST, DELETE, PUT, OPTIONS, HEAD
Access-Control-Allow-Headers    Content-Type, Accept, X-Requested-With
Access-Control-Allow-Credentials    true
Content-Type    application/json
Transfer-Encoding   chunked
Date    Thu, 09 Jan 2014 14:43:07 GMT

What I am doing wrong?

Deepak Thomas
  • 3,355
  • 4
  • 37
  • 39
  • This is the response header for the OPTIONS request Response HTTP/1.1 204 No Content Server Apache-Coyote/1.1 Allow OPTIONS,GET,HEAD Access-Control-Allow-Origin * Access-Control-Allow-Credentials true Access-Control-Allow-Methods GET, POST, DELETE, PUT, OPTIONS, HEAD Access-Control-Allow-Headers Content-Type, Accept, X-Requested-With Date Thu, 09 Jan 2014 14:53:31 GMT – Deepak Thomas Jan 09 '14 at 14:54
  • /api/ HTTP OPTIONS (Aborted) 327 B 297 ms CORS Preflight – Deepak Thomas Jan 09 '14 at 14:56
  • 3
    You need to use the `Access-Control-Allow-Headers` response header to specify that the custom headers are allowed. – Jason P Jan 09 '14 at 15:28
  • Added Access-Control-Allow-Headers:* to server response. Even allow-origin is *. Still the problem persists. – Deepak Thomas Jan 13 '14 at 06:56
  • 1
    I don't think `*` is a valid value for `Access-Control-Allow-Headers`. I believe you have to list them. You should be able to get them from the `Access-Control-Request-Headers` request header though. See https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS. – Jason P Jan 13 '14 at 13:23
  • Thanks, Jason! Do you mind adding it as an answer so that I could accept it? – Deepak Thomas Jan 13 '14 at 13:26

1 Answers1

6

Solved. Thanks @JasonP for pointers. Changed Server Response Headers from

Access-Control-Allow-Headers:*

to specific ones

Access-Control-Allow-Headers: Content-Type, Accept, X-Requested-With, Session

and now it works!

Deepak Thomas
  • 3,355
  • 4
  • 37
  • 39