所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问来源“ http：// localhost”

Question

Hi guys I'm trying to go through this code that draws a graph, but I get No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'XXXX' is therefore not allowed access. I know there is things like CORS, but I don't know how to use it.

function get_last_oxygen(location, start_time, end_time)
    {
        var xmlHttp = null;
        var oxy_url = 'http://localhost:8888/' + location + '/oxygen/1/1/last';
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open( "GET", oxy_url, true );        
        xmlHttp.send( null );
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var json = JSON.parse(xmlHttp.responseText);
                var oxy = document.getElementById('oxygen');
                oxy.innerHTML = json.oxygen;
                get_oxygen_range(location, start_time, end_time);
                //alert(xmlHttp.status + ' ' + xmlHttp.responseText);
           }
        }
    }

    function get_oxygen_range(location, start_time, end_time) {
        var req_range = null;
        var range_url = 'http://localhost:8888/' + location + '/oxygen/1/1/' + start_time + ':' + end_time;;
        req_range = new XMLHttpRequest();
        req_range.open( "GET", range_url, true );       
        req_range.send( null );
        req_range.onreadystatechange = function() {
            if (req_range.readyState == 4) {
                var measurements = eval(req_range.responseText);
                draw_oxygen_diagram(measurements);
           }
        }
    }

    /* Draw a diagram */
    function draw_oxygen_diagram(data) {
        var container = document.getElementById('container');
        //var data = [[1,10], [2,8], [3,11], [4,7], [5,9]];
        graph = Flotr.draw(container, [data], {
            //shadowSize: 0,
            timeUnit: 'second', 
            yaxis : { 
                max: 20,
                min: 0
            },
            xaxis : {
                mode: 'time'
            }
        });
    }

    function refresh() {
        var now = Math.round(new Date().getTime() / 1000);
        now = 1406906881;
        get_last_oxygen('rauco', now - 86400, now);
        setTimeout(refresh, 5000);
    }

    refresh();

Answer 1

For a PHP server all you have to do to enable CORS is to add this line.

header("Access-Control-Allow-Origin: *");

Make sure this is set before any other content is sent. That means above any echo statements or html. Putting it towards the top should work.

The website http://enable-cors.org/index.html is a good resource for learning more about CORS and how to allow it on different server setups.

Answer 2

Refer Angular.js No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

"Access-Control-Allow-Origin is set on the response from server, not on client request to allow clients from different origins to have access to the response."