CODEWITHSUNDEEP
jqueryajaxfirefox-addoncross-domain
ixx
ixx

Reputation: 32269

Cross-domain origin error with Firefox add-on in localhost?

I'm trying to make an ajax request from a Firefox add-on, to my server, which is running locally:

$.ajax({type: "GET",url: "http://localhost:9000/getFoo?param=foo",

success: function (data) {
  console.log("response: " + data);
},
error: function(xhr, textStatus, errorThrown) {
  console.log("error! xhr status: " + xhr.status);
  console.log("error! textStatus: " + textStatus);
  console.log("error! errorThrown " + errorThrown);

}


});

This url works fine if I put it in the browser, however in the add-on it executes the error callback, with status 0 and no messages.

After researching a bit, I found that this seems to be the symptomatic of a cross domain origin error (although, I don't understand why). This might be confirmed, by the fact, that in the code of the original Add-on, which I'm modifying, the (remote) url was sent as a parameter to yahooapis.com, instead of being used directly:

var q = encodeURIComponent('select * from html where url="'+url+'" and xpath='+"'//"+'td[contains(@class,"text")]'+"'"+' limit 1');
url = 'http://query.yahooapis.com/v1/public/yql?q='+q;

(With this, the original request works. I haven't it even tested with mine although, since it doesn't seem to make sense to send a query with localhost to yahoo).

So how can I deal with this? For my case the jQuery way (this one) is the only suitable. There's a different possibility using a call from the SDK (forgot the name), which seems to work, but I have certain conditions because of I have to do the request using JQuery. I don't understand at all why I'm having cross domain problems here. I also did a blind try to add cross domain headers to the server's response, but it had no effect.

Thanks.

Edit:

This is the add-on which I'm editing, if somebody wants to see the complete code:

https://builder.addons.mozilla.org/package/197498/

the problem-file is data/popup.js.

To answer the comment - I'm calling this from data/popup.js. This file is used in a panel, which is initialized in the main js file like this (lib/main.js):

var mypanel = require("sdk/panel").Panel({
  width:370,
  height:60,
  contentURL: data.url("clock.html"),
  contentScriptFile:
    [data.url("jquery-1.10.2.min.js"), data.url("popup.js")],
  contentScript: "self.port.emit('resize', " +
                   "{width: document.documentElement.clientWidth, " +
                   "height: document.documentElement.clientHeight});"
});

Upvotes: 1

Views: 1426

Answers (1)

nmaier
nmaier

Reputation: 33192

XMLHttpRequest and by that $.ajax in content scripts are limited by the same-origin policy/CORS.

  • You'll either have to implement CORS on your localhost. (Not quite sure if CORS actually works in panels with a local URI, though...)
  • Or use the request module. Using the request module will require some message passing between the lib script and the content script.
  • Or wait for the new permissions introduced in Firefox-24.

Upvotes: 1

Related Questions