无法使用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....

Answer 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/

Answer 2

端口不匹配;）试图建立请求的页面必须位于同一端口;）

Answer 3

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.

Answer 4

same-origin-policy is a browser security measure that restricts JavaScript code from talking with resources originating from other websites ie 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 ie 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})

Answer 5

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.