Cross-domain $.ajax request is not working

Question

Included below is the code that I am trying to use to display the HTML contents of another page. I am unable to get the code to work and am receiving an error each time. What am I missing here?

$.ajax({
    url: 'http://www.msn.com',  
    type: 'GET',
    dataType : "text/html",
    success: function (result) {
        alert('success');
        alert(result);
    },
    error: function() { 
       alert('error');
}
});

@Shyju: Hi for this request yes, but eventually I want to hit an internal "http://myserver/getstuff?id=2" rest service to get xml. However, I'm just testing basics here as this simple call to msn.com is not returning success (as was my call to the rest service specified above). But I'm pretty new to ajax so not sure if cross domain or not? — Mariah, Jul 06 '12 at 17:32
Seriously? One second spent with Google would have let you know that cross-domain requests aren't allowed with AJAX. StackOverflow should be your last resort, not your first. — Chris Pratt, Jul 06 '12 at 17:43
Indeed -- stop testing with MSN.com. Use your local domain to test and you eliminate this problem. You're wasting time trying to figure out how to do something that you won't actually be doing anyway. "Cross domain" means "not the same domain as the script". So unless you're a developer working on the MSN site... MSN.com is cross-domain. — Chris Baker, Jul 06 '12 at 17:45

score 3 · Accepted Answer · answered Jul 06 '12 at 17:31

3

You cannot do a cross-domain AJAX request (unless the servers are specifically set up for it).

The best you can do is call a PHP script on your server, which in turn gets the HTML from the other server and sends it back to your page.

answered Jul 06 '12 at 17:31

Niet the Dark Absol

320,036
81
464
592

score 3 · Answer 2 · answered Jul 06 '12 at 17:32

3

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

Script and JSONP requests are not subject to the same origin policy restrictions.

Source: http://api.jquery.com/jQuery.get/

answered Jul 06 '12 at 17:32

Control Freak

12,965
30
94
145

I was thinking jsonp too, but not to retrieve HTML -- won't work! :) – Chris Baker Jul 06 '12 at 17:44

score 2 · Answer 3 · answered Jul 06 '12 at 17:31

2

You can only make ajax requests to your own domain. Point it to your own pages and your success function will be called.

answered Jul 06 '12 at 17:31

gcochard

11,408
1
26
41

score 1 · Answer 4 · answered Jul 06 '12 at 17:31

1

In Chrome, open up Web Inspector (e.g. right-click, Inspect Element) and go to the Console tab, then run that code. You will then actually get to see the cross-domain scripting security error you are triggering.

answered Jul 06 '12 at 17:31

chaos

122,029
33
303
309

score 1 · Answer 5 · answered Jul 06 '12 at 17:36

1

If you indeed intended to do a Cross-Domain AJAX request and you're looking to retrieve a HTML response you may want to check out this article by James Podolosky, where he discusses piping these sort of requests through YQL and provides a plugin to automate this by overriding the jQuery.ajax function, allowing you to use it as you expected here.

answered Jul 06 '12 at 17:36

Steve

5,771
4
34
49

From your more recent comments you've suggested you're just testing and that you do not intend to do a cross-domain request, in this case this plugin is of no use to you, I advise you do your testing on a local file. – Steve Jul 06 '12 at 17:38

score 1 · Answer 6 · answered Jul 06 '12 at 17:39

1

If you're fine using an external API, you can use YQL (but it's not perfect).

Check this fiddle and you'll see it working. Perhaps it's not for you, just throwing it out there.

answered Jul 06 '12 at 17:39

MilkyWayJoe

9,082
2
38
53

Cross-domain $.ajax request is not working

6 Answers6

Linked