XmlHttpRequest failed (No 'Access-Control-Allow-Origin' header)

Question

I'am aware that there are many questions like this, but i wasnt able to solve my problem with the provided solutions. First of all i have a simple node.js webserver:

var serveFile = function(path, response) {
    fs.readFile(__dirname + path, function(err, data) {
        if (err) {
            console.log('There is no file: ' + path);
            response.end('Error ' + path);
        } else {
            if (path.endsWith('.png')) {
                response.writeHead(200, {
                    'Content-Type': 'text/html',
                    'Content-Length': data.length
                });
                response.write(new Buffer(data).toString('base64'));
                response.end();
                console.log("Image Found");

            } else {
                response.writeHead(200, {
                    'Content-Type': 'text/html',
                    'Content-Length': data.length
                });
                response.write(data);
                response.end();
                console.log("File Found");
            }
        }
    });
}

i use the serveFile method to serve either .png or .glsl.

ok so far so good, when i request a .glsl ressources, f.e. http://localhost:8080/src/engine/glsl/shader.glsl :

  xmlReq = new XMLHttpRequest();
    console.log(filePath);
    xmlReq.open('GET', 'http://localhost:8080/' + somePath, false);
    try {
        xmlReq.send();
    } catch (error) {
        alert('Error loading shader: ' + filePath);
        return null;
    }
    shaderSource = xmlReq.responseText;

everything works fine, except that i should do it async :p.

BUT when i request the .png with almost the exact same code:

function loadImage(file) {
    console.log('loading....');
    var xhr = new XMLHttpRequest();
    xhr.open("GET", 'http://localhost:8080/'+ file, false);

    try {
        xhr.send();
    } catch (error) {
        console.error(error);
    }
    var dataURL = "data:image/png;base64," + this.responseText;

    return dataURL;
}

I get the following error:

testGL.js:142 XMLHttpRequest cannot load http://localhost:8080/test/src_test/texture.png. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I dont understand how can the .glsl request work and the request for the image doesnt??? What am i missing? and how could i fix it?

"I dont understand how can the .glsl request work and the request for the image doesnt?" — The png request is being made from an HTML document loaded over `file:///`. What is the URL of the HTML document where it works? — Quentin, Jul 31 '16 at 18:33
@DavidR no its not based on node/express , i just use node.js to serve some files... — greedsin, Jul 31 '16 at 18:34
@Quentin http://localhost:8080/index.html is where i use .glsl and this works. But i dont completely understand what your asking, maybe i add a screenshot of my folder structure? EDIT : ah ok, so the HTML where it works is actually an electron app — greedsin, Jul 31 '16 at 18:38
@Quentin EDIT2 : if i dont access it over file:// and use http:// instead i dont get the error . — greedsin, Jul 31 '16 at 18:44
@Quentin, I guess he is using a wrong content-type in the writehead function, it has to be `'Content-Type' : 'image/png'` instead of `Content-Type': 'text/html'` — David R, Jul 31 '16 at 18:45
@DavidR — No. The problem (at least the problem being asked about) is the same origin policy violation described in the duplicate question. — Quentin, Jul 31 '16 at 18:47

XmlHttpRequest failed (No 'Access-Control-Allow-Origin' header)

0 Answers0