CORS error with jquery

Question

I'm currently working on a project using the cloudapp API and I'm using jquery. Here is my code:

 $.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

When I run this I get 200 OK response and this error in Firefox:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://cl.ly/2wr4. This can be fixed by moving the resource to the same domain or enabling CORS.

and this error in Google Chrome:

XMLHttpRequest cannot load http://cl.ly/2wr4. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

and nothing is logged to the console. Please how can I fix this error?

Thanks.

Solution 1

An important note for those newer coders is that everything on http://enable-cors.org/server.html assumes you have a server running. If you're new, like I was originally, these type of answers don't help.

If you've just made some code on your computer, CodePen, etc - you can't configure this.

There's an important difference between server-side and client-side scripting - your jquery is running on the client side (that is, the users computer / browser) and as such there's no such thing as setting the headers there.

I finally started making progress with this issue when I set up my own server and my own PHP files (PHP is server-side, as such its processed on the server - not the browser) and was able to start making requests just fine.

Adding this for anyone who is being drowned in answers involving the "Header set Access-Control-Allow-Origin "*" answer. It really frustrated me when I started as well.

Solution 2

CORS (Cross-Origin Resource Sharing) is an HTML5 feature that allows one site to access another site’s resources despite being under different domain names.

The W3C specification for CORS actually does a pretty good job of providing some simple examples of the response headers, such as the key header, Access-Control-Allow-Origin, and other headers that you must use to enable CORS on your web server.

If you are looking for specific information on how set up CORS on a variety of common web servers, check out the Enable CORS sharing website. http://enable-cors.org/

Based on the URL that you have given above, I don't think you have a control on that server. Thus, it will simply would not work.

Even though you have enabled crossDomain: true the server should return you required headers such as:

Here’s a valid server response; the CORS-specific headers are bolded

HTTP Response:

Access-Control-Allow-Origin: http://xyzcom
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8

One thing you can try is this:

$.ajax({
            headers: { "Accept": "application/json"},
            type: 'GET',
            url: 'http://cl.ly/2wr4',
            crossDomain: true,
            beforeSend: function(xhr){
                xhr.withCredentials = true;
          },
            success: function(data, textStatus, request){
                console.log(data);
            }
 });

Otherwise, you need to contact API provider.

Solution 3

to fix the error, you need to enable CORS on the server. The client expects to see CORS headers sent back in order to allow the request. It might even send a preflight request to make sure that the headers are there.

You can enable CORS server side for one, multiple, or all domains hitting your server. The configuration is different depending on the type of your server.

Refer to the following page for more info : http://enable-cors.org/server.html

You already enabled CORS requests in your request above, so client side you should be all set.