$.ajax(): Origin null is not allowed

Question

I'm just starting with $.ajax(). This is my code:

<html>
<head>
    <title>Commons app</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<script type='text/javascript'>
    if($) console.log('jQuery loaded!\n');

    $(function () {
        $.ajax({
            url: 'http://en.wikipedia.org/w/api.php?action=query&list=allimages&ailimit=5&aifrom=Albert&aiprop=dimensions|mime&format=jsonfm&callback=?'
        })
        .done(function () { console.log('Yay!'); })
        .fail(function () { console.log('Error!'); })
        .always(function () { console.log('Complete!'); });
});
</script>
</body>
</html>

For some reason I get the following error message:

XMLHttpRequest cannot load http://commons.wikimedia.org/w/api.php?action=query&generator=allimages&gailimit=4&gaifrom=T&prop=imageinfo&iiprop=url&callback=?. Origin null is not allowed by Access-Control-Allow-Origin.

score 1 · Accepted Answer · edited Oct 20 '14 at 06:59

1

Update: This method is deprecated from jQuery 1.9. Does not work anymore.

Old answer:

Try this (updated):

$.support.cors = true;

$(function () {
     $.ajax("http://commons.wikimedia.org/w/api.php?action=query&generator=allimages&gailimit=4&gaifrom=T&prop=imageinfo&iiprop=url&callback=?")
     .complete(function () { alert('complete'); })
     .error(function () { alert('error'); })
     .success(function (data) { alert(data); });
});

More about jQuery.support.cors setting here: jQuery.support

P.S. thanks for a nice question! I believe it will be useful for me also in future.

edited Oct 20 '14 at 06:59

Haywire

858
3
14
30

answered Oct 13 '11 at 10:28

Yuriy Rozhovetskiy

22,270
4
37
68

I think this is not working anymore, just tested on Chrome for Mac, version 30.0.1599.101. XMLHttpRequest cannot load http://commons.wikimedia.org/w/api.php?action=query&generator=allimages&gailimit=4&gaifrom=T&prop=imageinfo&iiprop=url&callback=?. Origin null is not allowed by Access-Control-Allow-Origin. – Francesco Frapporti Oct 17 '13 at 10:37

score -3 · Answer 2 · answered Oct 13 '11 at 10:11

-3

You need to be aware of the cross-domain-restrictions for AJAX requests, which will prevent you from loading arbitrary websites in the background for safety reasons. See here for more information.

Old Answer:
When you use $(foo) you need to specify with foo which elements you mean to modify. What you probably are looking for is something like this:

$(document).ready(function(){
   // do something 
}

This will execute the functions once the document finished setting up its DOM structure.

answered Oct 13 '11 at 10:11

Till Helge

9,253
2
40
56

1

I don't understand what you are saying. `$()` is a shortcut for `$(document).ready()`. – Randomblue Oct 13 '11 at 10:13
Indeed. I didn't realize. :) Never seen that before. I added a second part to my answer. Maybe that helps. – Till Helge Oct 13 '11 at 10:15
Regarding your new answer: I don't think it's a cross-domain-restriction. The only other thing I'm doing is loading jQuery from Google's CDN. – Randomblue Oct 13 '11 at 10:35
I just found [this SO question](http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin), which might help you. – Till Helge Oct 13 '11 at 10:38

$.ajax(): Origin null is not allowed

2 Answers2

Linked