Ajax Request with CORS not going through

Question

I'm trying to make a cross domain request. I am aware of CORS and want to test the call from for example w3schools as a domain.

I'm using Jersey for the REST API and an Apache server , and did the following :

    ResponseBuilder rb = Response.status(status).entity(mapper.writeValueAsBytes(data)).type(MediaType.APPLICATION_JSON);
    **EDITED **
    rb.header("Access-Control-Allow-Origin","*");
    rb.header("Access-Control-Allow-Methods","GET, OPTIONS");
    rb.header("Access-Control-Allow-Headers","*");



   return rb.build

When i view my response headers from just calling my API from the browser I see

Access-Control-Allow-Headers:*
Access-Control-Allow-Methods:GET, OPTIONS
Access-Control-Allow-Origin:*
Cache-Control:private
Content-Length:2523
Content-Type:application/json
Date:Wed, 17 Apr 2013 20:16:20 GMT
Expires:Wed, 31 Dec 1969 16:00:00 PST
Server:Apache-Coyote/1.1

but when I want to really test it using a different domain ie in W3 schools, I have the following -

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
 <script>
$(document).ready(function(){
 $("button").click(function(){

   $.ajax({
        url: "url", // this is a real URL replaced with just url
        type: 'GET',

        success: function(content) { console.log("ok"); },
        error: function(XMLHttpRequest, textStatus, errorThrown) {   
            console.log("error");
        },
        complete: function() { console.log("complete"); }
     });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>

I always get a XMLHttpRequest cannot load :url:. Origin http://www.w3schools.com is not allowed by Access-Control-Allow-Origin.

My Request headers are

Accept: */*
Origin:http://www.w3schools.com
Referer:http://www.w3schools.com/jquery/tryit_view.asp?x=0.8691769954748452
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31

I tried testing the above in jsfiddle as well, but got the same error .

Note : My URL is still just on my localhost, is it possible that that is the issue?

What am I missing?

Can you share the request headers as well? My guess is you will need an Access-Control-Allow-Headers header, or you will need to handle OPTIONS requests. Also note that your response header says Allow-Control-Allow-Methods, and it should be Access-Control-Allow-Methods — monsur
@anazimok : By going to that URL I was able to navigate to enable-cors.org/server_apache.html , where it tells me to apply the headers I seem to have applied? Is there anything else I'm missing? — Rahul
@monsur : I have updated my question with the request headers. I shall try your suggestions right now and let you know — Rahul
@Rahul: Are you sure w3schools.com supports CORS? I have tried hitting site i know does support cors from jquery and it works just fine, while w3schools.com does not. See example here: jsfiddle.net/anazimok/3J2F6 — anazimok

Rahul Rahul · Accepted Answer · 2013-04-19T08:21:16

So I fixed my problem.

I had to do this

jQuery.ajax({
   url: 'url',
   xhrFields: {
      withCredentials: true
   },
   success : function(data) {alert(data); }
});

Since my REST service was one that needed authentication, I guess it needed authentication before anything at all happened, so once I did that and specified my origin in my response, I was able to get it to work.

Ajax Request with CORS not going through

1 Answers