Cross Origin Resource Sharing (CORS) via AJAX

Question

I know there is a lot of questions on this topic and I have been trying to resolve this for some time. Please indulge me in this specific case.

My Goal:

I am trying to get the JSON data from the following URL:

https://www.icims.com/bellworks

I am using the following AJAX request:

$.ajax({

    url: "https://www.icims.com/bellworks", 

    success: function(res){
        console.log(res);
    }
});

My Problem:

I am getting the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.icims.com/bellworks. (Reason: CORS preflight channel did not succeed).

Despite the fact that accessing the URL directly gives the following in the header:

Access-Control-Allow-Origin: *

I have downloaded Firefox and Chrome extensions enabling CORS and this works! I am able to get the data.

My questions:

What are these CORS plugins doing that Im not?

Clearly, this is something I need to add to the client-side of the origin, correct? That is, I need to make changes to me AJAX request. I do not need to make any changes to the responding server.

What do I need to add in my request to correct this issue?

See here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — wannadream, May 08 '17 at 15:51
Have you tried this? http://stackoverflow.com/a/42554319/2506219 — Ginger Squirrel, May 08 '17 at 15:59
The header is put on the GET requests, but no the OPTIONS preflight request. — Charlie Martin, May 08 '17 at 16:10
Your response from that url looks more like `jsonp` - it has a method call round the json. `bellway({...json...})` — Jamiec, May 09 '17 at 10:33
ie, even if you *do* manage to make a CORS request, you wont be able to parse the json. It'll be invalid. — Jamiec, May 09 '17 at 10:49

score 4 · Accepted Answer · answered May 09 '17 at 10:43

I am getting the following error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.icims.com/bellworks. (Reason: CORS preflight channel did not succeed).

Despite the fact that accessing the URL directly gives the following in the header:
Access-Control-Allow-Origin: *

Where do you see that? I don’t see any Access-Control-Allow-Origin response header at all in responses from https://www.icims.com/bellworks—not in browser devtools nor, e.g., curl:

$ curl -i -H "Origin: http://example.com" https://www.icims.com/bellworks
HTTP/1.1 200 OK
Age: 141
Cache-Control: public, max-age=1800
Content-Type: application/javascript; charset=utf-8
Date: Tue, 09 May 2017 10:17:38 GMT
Etag: "1494323930-1"
Expires: Sun, 19 Nov 1978 05:00:00 GMT
Last-Modified: Tue, 09 May 2017 09:58:50 GMT
Server: nginx
Vary: Cookie,Accept-Encoding
Via: 1.1 varnish
X-AH-Environment: prod
X-Cache: HIT
X-Cache-Hits: 2
X-Content-Type-Options: nosniff
X-Drupal-Cache: HIT
X-Request-ID: v-66496654-34a0-11e7-ba07-22000a2c8dd2
X-Varnish: 2264707046 2264675783
Content-Length: 6443
Connection: keep-alive

In simple cases like this, if 1) you don’t control the server you want to get data from in your frontend JS code, and 2) that server doesn’t send Access-Control-Allow-Origin in its responses, you can change your frontend code to instead make the request through an open CORS proxy:

$.ajax({    
    url: "https://cors-anywhere.herokuapp.com/https://www.icims.com/bellworks",
    …
});

That’ll cause the request to be made to https://cors-anywhere.herokuapp.com, a proxy which will then send it to https://www.icims.com/bellworks. And when that proxy gets the response, it’ll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser engine is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.

Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.

What are these CORS plugins doing that I’m not?

What they’re differently is, they’re just not being blocked by the browser. Plugins can do anything they want—which includes bypassing the cross-origin restrictions that browser impose on frontend JavaScript code in web apps the browser executes the code from.

Browser devtools are also unaffected by cross-origin restrictions—if you use devtools to examine the request you’re getting that Cross-Origin Request Blocked message for, you’ll notice that you can actually see the response in devtools. But that doesn’t mean the browser will necessarily expose the response to your frontend JavaScript code. The browser will only let your frontend JavaScript code access it if the response includes the Access-Control-Allow-Origin header.

Clearly, this is something I need to add to the client-side of the origin, correct?

No. There’s nothing you do from the client side which will change the fact that if your frontend JS code makes a cross-origin request and the response doesn’t include the Access-Control-Allow-Origin header, your browser will block your code from accessing the response. Period.

That is, I need to make changes to me AJAX request.

No, for the reason given above.

I do not need to make any changes to the responding server.

You do need to change the responding server to send the Access-Control-Allow-Origin header. Either that, or as explained above, you need to send the request through a proxy that will add the Access-Control-Allow-Origin header to the response the browser sees.

What do I need to add in my request to correct this issue?

If you don’t control the server the request is being made to, really your only choice is to change your code to instead make the request through a proxy that adds Access-Control-Allow-Origin.

score 0 · Answer 2 · answered May 08 '17 at 15:57

0

"Reason: CORS preflight channel did not succeed"

Seeing from your error message, the ajax call generates an "options" request which is cors blocked. (Access-Control-Allow-Methods)

Check this, maybe it helps: https://enable-cors.org/server_nginx.html

answered May 08 '17 at 15:57

Seirddriezel

593
6
11

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

The server response should also include this header: "Access-Control-Allow-Methods". Its value can be "POST, GET, OPTIONS" to allow the preflight request. See doc. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods

edited Jun 20 '20 at 09:12

Community

1
1

answered May 08 '17 at 16:08

samir benzenine

478
4
11

Cross Origin Resource Sharing (CORS) via AJAX

3 Answers3

Linked