XMLHttpRequest cannot load http://localhost:8080/exist/rest/db/.... Origin null is not allowed by Access-Control-Allow-Origin

Question

I am trying to retrieve an XML response using ajax calls to the eXist DB REST API(1).

Google Chrome provides me the following console error:

XMLHttpRequest cannot load XMLHttpRequest cannot load http://localhost:8080/exist/rest/db/movies?_query=%2Fmovies. Origin null is not allowed by Access-Control-Allow-Origin Origin null is not allowed by Access-Control-Allow-Origin

While Firebug in Firefox provides the following console error:

GET http://localhost:8080/exist/rest/db/movies?_query=%2Fmovies 200 OK X 35ms jquery.min.js(line 18)

Here is the ajax portion of the code:

$.ajax({
                    type: 'GET',
                    dataType: 'xml',
                    url: 'http://localhost:8080/exist/rest/db/movies',
                    data: {
                        _query: _query_value,
                        _key: _key_value,
                        _indent: _indent_value,
                        _encoding: _encoding_value,
                        _howmany: _howmany_value,
                        _start: _start_value,
                        _wrap: _wrap_value,
                        _source: _source_value,
                        _cache: _cache_value
                    },
                    success: function(resp){
                        alert("Resp OK!");
                        console.log(resp);
                    },
                    error: function(hqXHR, textStatus, errorThrown){
                        var x=0;
                        alert("fail0 " + hqXHR + " " + textStatus + " " + errorThrown);
                    }
                });

I have read some related issues on this same problem, but I have found no luck with any of the solution that I tried.

The index.html which contains the ajax code segment above is accessed from my local machine as follows:

file:///.../index.html

I have tried executing chrome as follows:

chrome.exe --allow-file-access-from-files

Also, I tried to deploy the file to an online host so that it is located at

http://www.<somedomain>.com/index.html

The closest solution that I had was to change the dataType of the from xml to jsonp. The reponse was received, but since it is expected to be xml, the error became related to parsing, I think, with the following statement returned by the Google Chrome console:

Uncaught SyntaxError: Unexpected token <

and Firebug console:

XML can't be the whole program
[Break On This Error]   
</exist:result>
movies...3302057 (line 528, col 15)

Going back to my question, how can I properly retrieve the xml document via eXist DB? What am I doing wrong?

Looking forward to your help. I'm quite new to web development and am running out of ideas.

Thanks in advance!

Other notes:

The jquery.min.js that I'm using is located at http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js

The URI http://localhost:8080/exist/rest/db/movies?_query=%2Fmovies works when directly keyed in to any browser.

Reference:

(1) - http://www.exist-db.org/exist/devguide_rest.xml;jsessionid=e7096vtg4l7gmocouhe6zhle

Updates (1) It seems that I was able to get rid of the CORS problem by running eXist DB as a server as follows: bin/server.sh (in UNIX) or bin\server.bat (in Windows).

Now, I am running into another type of problem, though. I get the following error in the Google Chrome console using jquery.js:

GET http://localhost:8080/exist/rest/db/movies?_query=%2Fmovies  jquery.js:8240
jQuery.ajaxTransport.send jquery.js:8240
jQuery.extend.ajax jquery.js:7719
(anonymous function) index.html:43
jQuery.event.dispatch jquery.js:3332
jQuery.event.add.elemData.handle.eventHandle jquery.js:2941

and using jquery.min.js:

GET http://localhost:8080/exist/rest/db/movies?_query=%2Fmovies  jquery.min.js:18
f.support.ajax.f.ajaxTransport.send jquery.min.js:18
f.extend.ajax jquery.min.js:18
(anonymous function) index.html:43
f.event.handle jquery.min.js:17
f.event.add.i.handle.k jquery.min.js:16

What does the error mean? Which part of my code am I doing wrongly?

(2) Update 1, apparently, is an unnecessary problem that I faced. The server mode wasn't working with my machine that's why the errors above showed up.

Solution

This is a cross-domain request and is not permitted. Test from localhost instead of file://. Additionally, the remote server needs to return the proper CORS headers if it is intended to work cross-domain with any dataType other than JSONP. The JSONP datatype is not meant for returning XML.

Comments

[jrummell]

possible duplicate of XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

[Paul]

Thanks. I was able to read about CORS. Then I tried to run eXist DB as a server instead of the usual startup and now I don't get the same origin error. It's probably returning the proper CORS headers with this setting. Now, I have another set of errors which looks foreign to me. It is in the updates section of the question. Do you know what is still wrong in my code?

[Kevin B]

The errors look foreign to me too. Are you sure you are looking at the right area in the console?

[Paul]

Yes, I was looking at the correct console, but there was something else that I did wrongly. I overlooked the fact that in server mode, eXist wasn't working at all for my machine. Therefore, my requests were being sent to a nonexistent service. I ended up with the original problem, but tried to run the file from the localhost as you advised and it worked. Thanks a lot!