CODEWITHSUNDEEP
javascriptjsonxmlhttprequestcors
Daniel W.
Daniel W.

Reputation: 623

Why does this XMLHttpRequest work in Firefox Scratchpad but not on localhost?

I have this little piece of code which I tested in Firefox Scratchpad to get a json file containing all of the currently available Ubuntu Click Apps:

function getHttp(url, callback) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if (req.readyState === XMLHttpRequest.DONE) {
        callback(req.responseText);
    }
};
    req.open("GET", url, true);
    req.send();
}

 getHttp("http://search.apps.ubuntu.com/api/v1/search?q=", function(response) {
console.log(response);
});

When run directly from scratchpad it correctly fetches the desired json. However when I put this inside the javascript file of a little html app I'm writing it only returns an empty string response.
(page is hosted on a xampp install)

I already dug around quite a bit on the topic of CORS but it doesn't seem to help me because the "Access-Control-Allow-Origin: " property has to be set on the server, right?

I also tried to set the 'withCredentials' flag to true...but it doesn't change anything.

So why is it working with scratchpad but not when I access it from http://localhost/project/index.html?

Here's the response header I get btw:

"Date: Wed, 29 Jan 2014 12:04:52 GMT

 Server: gunicorn/0.15.0

 Content-Type: application/json

 Expires: Wed, 29 Jan 2014 12:05:52 GMT

 X-Bzr-Revision-Number: 68

 Cache-Control: max-age=60, private

 Content-Length: 29207

 X-Cache: MISS from localhost

 X-Cache-Lookup: MISS from localhost:3128

 Via: 1.0 localhost (squid/3.1.19)

 Strict-Transport-Security: max-age=2592000"

Any hint is greatly appreciated...I've already dug around and tried things for hours and I really don't know where to go from here

Upvotes: 0

Views: 947

Answers (2)

c.P.u1
c.P.u1

Reputation: 17094

The URL http://search.apps.ubuntu.com/api/v1/search?q= doesn't allow CORS requests because it doesn't send an Access-Control-Allow-Origin header in the response. withCredentials isn't needed.

With Scratchpad, you must be trying to run the code while on the http://search.apps.ubuntu.com domain. If you try running the same code while on a different domain, you won't get the response. The same will be true when running the code through console.

To work around this, you'll have to write a server-side script that resides on localhost and acts as a proxy between index.html and search.apps.ubuntu.com. That script will make an HTTP GET on the URL and return the response to index.html.

getHttp("ubuntuProxy", function(response) {
  console.log(response);
});

A script in NodeJS

var http = require('http'),
options = {host: 'search.apps.ubuntu.com', path: '/api/v1/search?q='}

http.get(options, function(res) {
   var response;
   res.on('data', function (data) {
     response += data;
   });
   res.on('end', function () {
     //set appropriate headers and send the response body
   });
});

Upvotes: 1

barak manos
barak manos

Reputation: 30136

My guess is that you need to encode the request arguments.

So instead of:

req.open("GET", url, true);
req.send();

Try:

req.open("GET", encodeURIComponent(url), true);
req.setRequestHeader("content-type","application/x-www-form-urlencoded");
req.send();

Upvotes: 0

Related Questions