Question

I do not know how to troubleshoot this problem.

XMLHttpRequest cannot load http://gumball.wickedlysmart.com/?lastreporttime=1302212903099. Origin http://192.168.0.102 is not allowed by Access-Control-Allow-Origin.

I googled and people say I should add ‘Access-Control-Allow-Origin: *;’ on header

How do I do that? Where do I put that? on html file? or js file?

Here is my JS code. Help please.

window.onload = function() {

    var url = "http://gumball.wickedlysmart.com/?lastreporttime=1302212903099&callback=?";
    var request = new XMLHttpRequest();

    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            updateSales(request.responseText);
        }
    };
    request.send(null);

    function updateSales(responseText) {
        var salesDiv = document.getElementById("sales");
        salesDiv.innerHTML = responseText;
    }

}

Answer 1

You don’t add the Access-Control-Allow-Origin header — they do.

It’s a “Response Header”, so the maintainers of gumball.wickedlysmart.com would have to add it to their response.

Though, I highly doubt they’ll be convinced to add a LAN-only IP — 192.168.x.x.

---

However, the service supports JSONP, so the header shouldn’t be necessary. This is because JSONP isn’t Ajax and doesn’t use XMLHttpRequest.

Instead, JSONP requests are made by appending new <script> sources to the document:

function requestJSONP(url) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    document.body.appendChild(script);
}

Also note that the ? of callback=? is just an aid offered by some libraries (e.g., jQuery). You have to specify an actual global function name as the value of callback to actually receive the response:

window.processResponse = function (data) {
    // ...
};

requestJSONP('http://gumball.wickedlysmart.com/?callback=processResponse');

Example: http://jsfiddle.net/mnjxB/1/