CODEWITHSUNDEEP
javascriptjqueryajax
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15311

Call a external web page (cross-domain) with javascript

I'm trying to validate a feed, using the web service that is in this question.

But browser does not allow me to send a ajax GET request to another server. And there is a one second restriction per each request in that web service, so I can't mirror requests from my server.

This is my current jQuery code:

var reqUrl = "http://validator.w3.org/feed/check.cgi?url=" + encodeURIComponent(theUrl);
$.get(reqUrl, function(data) {
    // do something
});

Isn't there any other way?

Upvotes: 2

Views: 8049

Answers (4)

DDN-Shep
DDN-Shep

Reputation: 443

I know this is an old question, but I myself have been trying to create AJAX requests to validator.w3.org as well, hit the exact same issues and stumbled on this SO question.

However, I did find a solution;

As people have already stated, the main problem here is that the server must issue valid CORS headers, i.e.

Access-Control-Allow-Origin: *

I used Fiddler to check the response headers from validator.w3.org and sure enough, the headers were not set. However, they also have another tool that does at validator.w3.org/nu/.

Here is an example: http://codepen.io/DDN-Shep/pen/ogdGgO/

$('form').on('submit', function(e) {
  e.preventDefault();

  var data = new FormData(this);

  $.ajax({
    url: 'http://validator.w3.org/nu/', // Trailing '/' is important or you get a 301 HTTP response status code
    type: 'POST',
    data: data,
    processData: false, // Required for jQuery & FormData
    contentType: false, // Set by FormData, required by the server
    success: function(data, status, xhr) { /* TODO */ },
    error: function(xhr, status, error) { /* TODO */ },
    complete: function(xhr, status) { /* TODO */ }
  });
});

If you are ever unsure whether or not a server allows CORS, you can use this very helpful online tool;

test-cors.org = http://client.cors-api.appspot.com/client

Upvotes: 0

Josh Mein
Josh Mein

Reputation: 28655

Ajax calls are not valid across different domains unless you use JSONP. JQuery-ajax-cross-domain is a similar question that may give you some insight. Also as noted by Luis in the comments, JSONP has to also be implemented on the domain that you are getting the data from.

Here is an example for jquery ajax(), but you may want to look into $.getJSON():

$.ajax({
    url: 'http://yourUrl?callback=?',
    dataType: 'jsonp',
    success: processJSON
});

Another option is CORS (Cross Origin Resource Sharing), however, this requires that the other server to enable CORS which most likely will not happen in this case.

Upvotes: 2

Luis
Luis

Reputation: 6001

As said you can use JSONP but the endpoint must also implement it, And its only used if you are requesting json data from the call. It looks like you are retrieving html.

You can also implement a simple proxy in your domain that pulls the data from the external location and serves it to the ajax call. You can develop a simple proxy in php using for instance CURL.

Make sure you understand the implications of this security wise making sure for instance that you protect your proxy to only make calls to that external url (whitelisting).

Update: I just noticed you cannot use the proxy solution. And after following the link you have suggested I have came across CORS, which I didnt event know about. So apparentry you can set some headers when you are serving the pages in your domain that will instruct the browser that requests to some domains can be done.

Check this page for how to implement it:

http://enable-cors.org/

I have read that you might have to tweak it a bit to work with IE but it seems that all browsers are now implementing it.

Upvotes: 1

Ahmadali Shafiee
Ahmadali Shafiee

Reputation: 4657

I searched google and found this. the third answer says that:

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.(source)

you'd better see the answers of this question.

I think you can't use JSONP because you haven't any access to W3C script.

Update (explanations)

I the question I linked to there is another way that I can explain it to you. if you set Access-Control-Allow-Origin header to * as the answer said you can send requests to another domains. and to use it easily in an MVC application you can see this solution. Good luck

Update2

to allow just http://validator.w3.org/ you just should set Access-Control-Allow-Origin to http://validator.w3.org/

for more details as answer said go here.

Upvotes: 2

Related Questions