Can't make get request using ajax

Question

Here is the error message: XMLHttpRequest cannot load (the url1). Origin http://localhost:8081 is not allowed by Access-Control-Allow-Origin.

Here is the code:

$.ajax({
    url: (the url2),
    async : false,
    data: { fbId     : eh,
            fbSecret : meh,
            key      : bleh
          },
    datatype: "json",
    success: function(result){
                 console.log(result);
             }
});

I know the url is correct because when I click it it gives me the data I need, which is like {"names" : ["blah"]}

Do I need to give out any more details?

I've tried various things like using jsonp/html instead of json, putting data directly into the url instead of separately as data, and using $.get instead of $.ajax, along with editing $.ajaxsetup....

AJAX requests aren't allowed to other domains for security reasons. Google should tell you this... — Bojangles
– Bojangles, Commented Aug 30, 2011 at 21:10

Rafay · Accepted Answer · 2011-08-30 21:24:11Z

1

the error message says it all, you cannot make cross domain ajax requests (exception in case of jsonp but that also has to be supported by the server) due to same-origin-policy

this may help you here http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-cross-domain-ajax-request-with-yql-and-jquery/

edited Aug 30, 2011 at 21:24

answered Aug 30, 2011 at 21:09

Rafay

31.1k5 gold badges71 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dave Zhang Over a year ago

Hm, is there any way I can override this?

Rafay Over a year ago

:) nope you cannot override it but you can make a server side proxy that can access this service you can then make an ajax request to your server proxy which will return you the json response

GorillaMoe Over a year ago

.. or you can use json with padding ;) don't really know what you mean by "exception in case of jsonp but that also has to be supported by the server"..

Rafay Over a year ago

@Walialu jsonp is json with padding but you can only use it if the server supports it

GorillaMoe Over a year ago

@3nigma I don't get what you mean, I used jsonp several time on several different web-projects and I don't need to setup or modify some some awkward mod/config file for this.. you can see it here: imho.h4kr.com/30

|

GorillaMoe · Accepted Answer · 2011-08-30 21:10:21Z

0

ports mismatch ;) the page that tries to establish the request has to be on the same port ;)

answered Aug 30, 2011 at 21:10

GorillaMoe

4,1342 gold badges29 silver badges29 bronze badges

Comments

MiMo · Accepted Answer · 2011-08-30 21:12:50Z

0

I think you are trying to access a server different than the one you served the script from - the JavaScript code inside a page served from server A can access only server A using XmlHttpRequest.

If this is the problem there is no easy solution - you have to use proxy or avoid XmlHttpRequest altogether.

answered Aug 30, 2011 at 21:12

MiMo

12k1 gold badge35 silver badges48 bronze badges

Comments

Baz1nga · Accepted Answer · 2011-08-30 21:28:03Z

same-origin-policy is a browser security measure that restricts JavaScript code from talking with resources originating from other websites i.e resources loaded from any other domain and/or port. eg. JS running in a web page on http://google.com:80 cannot interact with data loaded from http://cbs.com or even http://cbs.com:8081

Working around SOP a) Proxy in your server: you create a end point in your app that talks to the external url and returns the result

b) Load the JSON response into a <script> tag otherwise jsonp i.e json with padding

eg:

var url = "http://localhost:8081/?queryString=asdsa&callback=jsonCallback";

var script = document.createElement("script");
script.setAttribute("src", url);
script.setAttribute("type", "text/javascript");

window.jsonCallback = function(jsonObj) {
  // use JSON object here

  // cleanup
  document.body.removeChild(script);
  delete window[callback];
}

document.body.appendChild(script)

In your case since you are running it of a different port it is not valid and hence the error thrown by the browser..

and there are some server side changes that go along with this.. read up on how to do it for your scripting language..

basically the response should be something like:

jsonCallback({"Name": "Random", "Id" : 2432, "Rank": 453})

rkw · Accepted Answer · 2011-08-30 21:28:47Z

0

Use dataType: "JSONP" to overcome the limitation you encountered; check out the documentation to implement it correctly. You also have to provide a callback function for it.

answered Aug 30, 2011 at 21:28

rkw

7,2974 gold badges28 silver badges39 bronze badges

Collectives™ on Stack Overflow

Can't make get request using ajax

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related