XMLHttpRequest cannot load an URL with jQuery
Solution 1
You can't do a XMLHttpRequest crossdomain, the only "option" would be a technique called JSONP, which comes down to this:
To start request: Add a new <script>
tag with the remote url, and then make sure that remote url returns a valid javascript file that calls your callback function. Some services support this (and let you name your callback in a GET parameters).
The other easy way out, would be to create a "proxy" on your local server, which gets the remote request and then just "forwards" it back to your javascript.
edit/addition:
I see jQuery has built-in support for JSONP, by checking if the URL contains "callback=?" (where jQuery will replace ? with the actual callback method). But you'd still need to process that on the remote server to generate a valid response.
Solution 2
In new jQuery 1.5 you can use:
$.ajax({
type: "GET",
url: "http://localhost:99000/Services.svc/ReturnPersons",
dataType: "jsonp",
success: readData(data),
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
})
Solution 3
Fiddle with 3 working solutions in action.
Given an external JSON:
myurl = 'http://wikidata.org/w/api.php?action=wbgetentities&sites=frwiki&titles=France&languages=zh-hans|zh-hant|fr&props=sitelinks|labels|aliases|descriptions&format=json'
Solution 1: $.ajax() + jsonp:
$.ajax({
dataType: "jsonp",
url: myurl ,
}).done(function ( data ) {
// do my stuff
});
Solution 2: $.ajax()+json+&calback=?:
$.ajax({
dataType: "json",
url: myurl + '&callback=?',
}).done(function ( data ) {
// do my stuff
});
Solution 3: $.getJSON()+calback=?:
$.getJSON( myurl + '&callback=?', function(data) {
// do my stuff
});
Documentations: http://api.jquery.com/jQuery.ajax/ , http://api.jquery.com/jQuery.getJSON/
Solution 4
Found a possible workaround that I don't believe was mentioned.
Here is a good description of the problem: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api
Basically as long as you use forms/url-encoded/plain text content types you are fine.
$.ajax({
type: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
dataType: "json",
url: "http://localhost/endpoint",
data: JSON.stringify({'DataToPost': 123}),
success: function (data) {
alert(JSON.stringify(data));
}
});
I use it with ASP.NET WebAPI2. So on the other end:
public static void RegisterWebApi(HttpConfiguration config)
{
config.MapHttpAttributeRoutes();
config.Formatters.Clear();
config.Formatters.Add(new JsonMediaTypeFormatter());
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/plain"));
}
This way Json formatter gets used when parsing plain text content type.
And don't forget in Web.config:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="GET, POST" />
</customHeaders>
</httpProtocol>
Hope this helps.
Zakaria
Updated on July 09, 2022Comments
-
Zakaria almost 2 years
I'm trying to get some json data from a "remote" website. I run my web service on the 99000 port then, I launch my website on the 99001 port (http://localhost:99001/index.html).
I get the following message:
XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons. Origin http://localhost:99001 is not allowed by Access-Control-Allow-Origin.
Even If I launch my web page as an HTML file, I get this:
XMLHttpRequest cannot load http://localhost:99000/Services.svc/ReturnPersons.Origin null is not allowed by Access-Control-Allow-Origin.
The web service returns data. I try to catch the data items like this:
var url = "http://localhost:99000/Services.svc/ReturnPersons"; $.getJSON(url, function (data) { success: readData(data) }); function readData(data) { alert(data[0].FirstName); }
And I'm trying to get this structure:
[{"FirstName":"Foo","LastName":"Bar"},{"Hello":"Foo","LastName":"World"}]
Do you know why I'm getting this error?
-
Zakaria over 13 yearsI solved the problem by adding the "&callback=?" to the URL. Thank you!
-
j7nn7k almost 13 yearsDo I have to specify/implement anything in the server script on the remote server?
-
CharlesLeaf almost 13 yearsYes, where your server normally returns a JSON string, e.g.
{"foo": "bar"}
you need to wrap the json string in a callback method (javascript function) that handles the json response. e.g.myFunction({"foo": "bar"});
-
benathon over 11 yearsCharles Leaf, actually you are wrong. There is another "option" which is called CORS. Checkout how to enable it here: enable-cors.org
-
CharlesLeaf over 11 yearsYou are right portforwardpodcast, but when this question was originally asked in 2010 CORS was a less popular choice (to be fair: one that I had never heard of back then) and while IE6 support has been dropped by most, there is still a demand to support IE7 which doesn't support CORS and IE8 only supports it partially. So depending on your requirements this is a very valid (and better) option yes.
-
Hugolpz over 10 yearsJSfiddle fixed following #wikidata API changes, jsfiddle improvement done, redaction improvement done !
-
Slav almost 9 yearsi'm, guessing it's extra ":" in your response. could you paste whole message ?
-
Hugolpz over 7 years@TuhinPaul: when you are on https fiddle you cannot request http wikidata or others http, it would be a security breach. You can do http-http, https-https, or http-https, not https-http. This is a security feature, not a cross domain issue.