Cross origin request blocked

Question

I want to retrieve json data from an other website so I tried to do a simple crossdomain request. I ran this index.php file on Wamp :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" manifest="manifest.appcache">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MySite</title>
<script type="text/javascript">
    function getXDomainRequest() {
        var xdr = null;

        if (window.XDomainRequest) {
            xdr = new XDomainRequest();
        } else if (window.XMLHttpRequest) {
            xdr = new XMLHttpRequest({mozSystem: true});
        } else {
            alert("Your browser does not support AJAX");
        }

        return xdr;
    }
    function sendData() {
        var xdr = getXDomainRequest();
        xdr.onload = function() {
            alert(xdr.responseText);
        }

        xdr.open("GET", "http://example.com");
        xdr.send();
    }
</script>
</head>
<body>
<p>
        <input type="button" onclick="sendData();" value="Retrieve" />
</p>
</body>
</html>

But I get an error saying that cross origin request has been blocked. I'm pretty new to js and this is the first time I try to use a web API in js so I might have completly missed something here...

Thanks a lot.

An `XMLHttpRequest` won't work for cross-domain requests. See [JSONP](http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about). — Lucas Trzesniewski, Jul 09 '14 at 20:25
Ok, but XDomainRequest does right ? I'm querying [Steam API](https://developer.valvesoftware.com/wiki/Steam_Web_API#GetGlobalAchievementPercentagesForApp_.28v0001.29) which does not support JSONP unfortunatly. — dekajoo, Jul 09 '14 at 20:30
Do not make this request using the browser, otherwise your api key will be freely available to whoever(whomever?) uses your application. — Kevin B, Jul 09 '14 at 20:33

score 5 · Accepted Answer · edited May 23 '17 at 12:30

5

Javascript requests can only be cross-domain under certain circumstance. Below is a summary of a few techniques and work-arounds.

If the source has JSONP available, you can circumvent cross-domain restrictions. http://www.sitepoint.com/jsonp-examples/
Unlikely, but if the source has a origin policy, than you could do the cross domain request. Seeing as you are getting the error, I doubt the source has this policy. If I recall, this is not supported by all browsers...
If I recall, there are some iFrame methods (I would call them hacks) to transport the data. Not optimal at best.
If all else fails, you can cache the JSON file with PHP and store it on your server. No longer is it cross domain.

More details can be found at Ways to circumvent the same-origin policy

If you are attempting to pull it from a public API, than it is very likely that they have JSONP available. If they do not, it is likely that they don't want you to pull the data every time (they don't want to foot the bandwidth bill), but rather would prefer you cache it with PHP as necessary.

edited May 23 '17 at 12:30

Community

1
1

answered Jul 09 '14 at 20:36

Jason

4,079
4
22
32

Thanks that what I was looking for, I'm a bit scared of php but since JSONP won't work and I need to hide my API key I guess there is no ways around it... – dekajoo Jul 09 '14 at 20:43
@JonathanLonowski Fair enough. My wording probably wasn't the best; updated to reflect comment. – Jason Jul 09 '14 at 20:44
@deKajoo http://stackoverflow.com/questions/1006604/saving-file-using-curl-and-php – Jason Jul 09 '14 at 20:48
You may also be able to do it with file_get_contents() and file_put_contents()...I'd let others weigh in which method is better (CURL or file_get_contents). – Jason Jul 09 '14 at 20:51
Thanks, Let's say I use curl, do I have to write in a cache file ? Or could I call from a script a `dorequest.php` page which would `echo` the content I need ? Doing this, will my steamAPI key could be visible to users ? – dekajoo Jul 09 '14 at 20:55
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57057/discussion-between-jason-and-dekajoo). – Jason Jul 09 '14 at 20:57

Cross origin request blocked

1 Answers1

Linked