JavaScript - XMLHttpRequest, Access-Control-Allow-Origin errors

Question

I'm attempting to send a XMLHttpRequest to a paste site. I'm sending an object containing all the fields that the api requires, but I keep getting this issue. I have read over the issue, and I thought:

httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');

Would fix it,but it didn't. Does anyone have any information on this error and/or how I can fix it?

Here is my code:

(function () {

    'use strict';

    var httpReq = new XMLHttpRequest();
    var url = 'http://paste.ee/api';
    var fields = 'key=public&description=test&paste=this is a test paste&format=JSON';
    var fields2 = {key: 'public', description: 'test', paste: 'this is a test paste', format: 'JSON'};

    httpReq.open('POST', url, true);
    console.log('good');

    httpReq.setRequestHeader('Access-Control-Allow-Headers', '*');
    httpReq.setRequestHeader('Content-type', 'application/ecmascript');
    httpReq.setRequestHeader('Access-Control-Allow-Origin', '*');
    console.log('ok');

    httpReq.onreadystatechange = function () {
        console.log('test');
        if (httpReq.readyState === 4 && httpReq.status === 'success') {
            console.log('test');
            alert(httpReq.responseText);
        }
    };

    httpReq.send(fields2);

}());

And here is the exact console output:

good
ok
Failed to load resource: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. http://paste.ee/api
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:40217' is therefore not allowed access. index.html:1
test

Here is the console output when I test it locally on a regular Chromium browser:

good
ok
XMLHttpRequest cannot load http://paste.ee/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. index.html:1
test

So I should remove the headers all together? Edit: Removing them did nothing. — Nik, Feb 08 '14 at 01:11
That console output is from the live preview function (local server) on the Brackets IDE — Nik, Feb 08 '14 at 01:13
@Musa you are correct, because if the target domain is not his, then it won't matter as he would not be able to add the access control. — Panama Jack, Feb 08 '14 at 01:18
So it's not my fault? The page I'm sending the request to is missing the header? — Nik, Feb 08 '14 at 01:19
Did you ever solved this? I'm kinda stuck in the same situation (and almost the same website) — MoshMage, May 21 '14 at 12:22

score 58 · Accepted Answer · answered Feb 08 '14 at 01:53

I think you've missed the point of access control.

A quick recap on why CORS exists: Since JS code from a website can execute XHR, that site could potentially send requests to other sites, masquerading as you and exploiting the trust those sites have in you(e.g. if you have logged in, a malicious site could attempt to extract information or execute actions you never wanted) - this is called a CSRF attack. To prevent that, web browsers have very stringent limitations on what XHR you can send - you are generally limited to just your domain, and so on.

Now, sometimes it's useful for a site to allow other sites to contact it - sites that provide APIs or services, like the one you're trying to access, would be prime candidates. CORS was developed to allow site A(e.g. paste.ee) to say "I trust site B, so you can send XHR from it to me". This is specified by site A sending "Access-Control-Allow-Origin" headers in its responses.

In your specific case, it seems that paste.ee doesn't bother to use CORS. Your best bet is to contact the site owner and find out why, if you want to use paste.ee with a browser script. Alternatively, you could try using an extension(those should have higher XHR privileges).

I getting the same error which Koy got, but till now i am not getting solution. Can you tell me please where should i add header "Access-Control-Allow-Origin" ?? It should be in javascript or server side ? — , Jun 18 '14 at 08:18

score 0 · Answer 2 · answered Dec 16 '16 at 12:22

0

I've gotten same problem. The servers logs showed:

DEBUG: <-- origin: null

I've investigated that and it occurred that this is not populated when I've been calling from file from local drive. When I've copied file to the server and used it from server - the request worked perfectly fine

answered Dec 16 '16 at 12:22

Konki

186
1
4

Chrome in particular forbids Ajax accesses by default, if the HTML page and associated JavaScript files were loaded using the "file://" protocol. There exist workarounds, but they're associated with problems of their own (usually in the security realm). Chrome treats ALL Ajax accesses from such code as CORS violations. – David Edwards Jul 20 '18 at 22:52

score 0 · Answer 3 · answered Sep 01 '21 at 09:54

function cors() {
            var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("emo").innerHTML = alert(this.responseText);
            }
         };
         xhttp.withCredentials = true;
         xhttp.open("GET", "http://owasp-class.lab:4444/api/get_info", true);
         

         xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencode');

         xhttp.send();
         }

JavaScript - XMLHttpRequest, Access-Control-Allow-Origin errors

3 Answers3

Linked