Ajax / Firebase only works on localhost (same-origin policy?)

Question

I have a Firebase app that works perfectly on localhost, but does not work when I reach it externally (by allowing port forwarding in my router) or when I upload it to Bluehost.

This code works:

$(document).ready(function() {
    $("#button").click(function() {
        alert('Working!');
    });
});

but this does not:

var firebaseRef = new Firebase('[my firebase url]');

$(document).ready(function() {
    $("#button").click(function() {
        alert('Working!');
    });
});

After doing some research, I believe the problem to be the Same Origin Policy, since the Firebase JS include is

http://static.firebase.com/demo/firebase.js

but my firebase reference is on

http://gamma.firebase.com/

I've found a few ways to get around this but want to know the best way to handle it with Firebase (or if the Same Origin Policy is even the issue here).

Answer 1

I found the answer - just a dumb mistake on my part.

While searching through the Firebase tutorials, I caught my mistake. I was including the http://static.firebase.com/demo/firebase.js file, while the tutorial clearly says to include the http://static.firebase.com/v0/firebase.js file.

I am still curious as to why the demo file worked only on localhost...

Answer 2

Firebase uses CORS for the RESTful API and WebSockets for the JS clients, see this answer, so that's not an issue.

Looks like a problem related to the routing. Are you experiencing errors in the JavaScript console? "Does not work" is a bit abstract and a more precise error could help answer the secondary question.