Is it possible to load a cross domain web page through AJAX?

Question

I'm currently developing a mobile web application with jQM.

Although I looked for answers to my question, I couldn't find any good answers.

Here is my goal:

Downloading a specific element of a webpage in another domain.
Show the data through a dialog.

I'm stuck with the first step because of the cross-domain issue.

Some people writes about using JSONP with a callback function, but it seems that the technique only works when handling JSON format.

I also read that because of the security issues, JavaScript doesn't support downloading the html page in another domain.

Are they right?

There is no way to achieve my goal through JavaScript?

You can submit a request to your local server, have that retrieve the external page, and then return that in response to the AJAX request. I'm not sure there's a better/easier way to do it. — Anthony Grist, Apr 08 '13 at 15:22
https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript — epascarello, Apr 08 '13 at 15:22
You heard right -- unless you have control of the external domain, and can configure it to allow AJAX from a second domain, then the only way you can use AJAX to retrive data from an external domain is with JSONP. — Blazemonger, Apr 08 '13 at 15:22
@AnthonyGrist Thank you for suggesting another idea, but it sounds tricky. — Sungam Yang, Apr 08 '13 at 15:44
@epascarello Thanks for the link. MDN has many useful documents. — Sungam Yang, Apr 08 '13 at 15:44
@Blazemonger I don't understand why I cannot handle other resources through AJAX. — Sungam Yang, Apr 08 '13 at 15:45

Carol Skelly · Accepted Answer · 2018-04-10T18:31:02.317

10

There are many workarounds for this issue (JSONP, reverse proxy, 'Access-Control-Allow-Origin', etc..) described in a very extensive thread here on SO: Ways to circumvent the same-origin policy

edited Apr 10 '18 at 18:31

answered Apr 08 '13 at 15:27

Carol Skelly

351,302
90
710
624

Wow, the first link is also very useful! Thanks! – Sungam Yang Apr 08 '13 at 15:48
shouldn't this have been a "flag as duplicate" rather than a single-link accepted answer?! – ashleedawg Aug 19 '22 at 23:08

score 5 · Answer 2 · answered Apr 08 '13 at 15:21

5

The best way of doing this would be to use a local proxy. In other words : do the request server side in a script X , and call this script X from your javascript. That way your "cross-domain" query occurs from the server and there's no restriction to that.

answered Apr 08 '13 at 15:21

Laurent S.

6,816
2
28
40

Thanks for your suggestion. By asking a question, I can learn many approaches that I've never thought :) – Sungam Yang Apr 08 '13 at 15:47

score 4 · Answer 3 · answered Apr 08 '13 at 15:22

4

This is possible in two manners.

First, only if the external server has the cors headers set: http://enable-cors.org/server_apache.html. Then you can load it normally. If that header is not set, then it is not possible directly.

Second, you can use the server-side as a proxy. This is really only useful if you are doing GET requests on a static resource. Otherwise the load on the server will be very high. If you do not have a server to use, you can use YQL, but this is sketchy for production usage. http://davescoolblog.blogspot.com/2012/02/client-side-cross-domain-data-yql-hack.html

answered Apr 08 '13 at 15:22

000

26,951
10
71
101

Use the headers way, it will work best for you. Works with `post`, `get`, and `json` – PitaJ Apr 08 '13 at 15:24
But if they do not have control of the other domain then it is not possible. – 000 Apr 08 '13 at 15:33
It also isn't completely supported in all browsers, IE7 has no support for CORS, and IE8/9 require a plugin (or your own modifications) to use CORS with jQuery's ajax method. – Kevin B Apr 08 '13 at 15:36
@PitaJ, you mean the cors headers? I don't have permission of the external server. – Sungam Yang Apr 08 '13 at 15:46

score 2 · Answer 4 · answered Apr 08 '13 at 15:21

JSONP allows cross-origin sharing of any Javascript object. A string is a Javascript object, and in your case you could provide the markup for the element to include as a string and use standard Javascript techniques to process it.

If you prefer, you can also use Cross-origin resource sharing, which is less widely supported but doesn't incur the minor JSONP performance hit (although it has other performance flaws like requiring multiple requests for non-GETs).

Is it possible to load a cross domain web page through AJAX?

4 Answers4