Javascript: " No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "

Question

I need to write a web page that can get some information I need with JavaScript. The sever is a bamboo sever and I am trying to utilize the REST API of theirs in my JavaScript. https://developer.atlassian.com/display/BAMBOODEV/REST+APIs

The weird part is that I can perform all the requests by typing the link in the browser, or with curl command in termanal. It also works via a python script. I can receive the data with all the methods mentioned in the paragraph. It's just that when I go to JavaScript, it doesn't work anymore.

I have been following the information in the below link for making the CORS request. http://www.codeproject.com/Articles/185506/AJAX-Cross-Origin-HTTP-request

Attached below is my code. I was wondering if I have missed something.

<!doctype html>

<html>
    <head>  
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
        <script src="jquery-1.11.1.js"></script>
    <script src="crypto-js.js"></script>
        <script type="text/javascript">
        function showResponse (response) {
            RESPONSE = response;
            if (this && this.url && (typeof(this.url) == "string")) {
                var anchor = jQuery("#url");
                anchor.text(this.url.toString());
                anchor.attr('href', this.url.toString());
            }
            jQuery("#output").text(JSON.stringify(response, null, '  '));
        }
        </script>
        <script type="text/javascript">




    console.log("a")
    var cor = null; // cor stands for Cross-Origin request

    if (window.XMLHttpRequest) {
        console.log("support xmlhttprequest");
        cor = new XMLHttpRequest();
    }else {
        console.log("Your browser does not support Cross-Origin request!");
    }


    if("withCredentials" in cor){
        cor.open('GET', 'http://bamboo.example.com/rest/api/latest/stuff', true);
        cor.withCredentials = true;
        cor.setRequestHeader('Authorization', 'Basic encoded_stuff');
        cor.send();
    }

    cor.onload = function(){
        var responseText = xhr.responseText;
        console.log(responseText);
    };

    cor.onerror = function() {
        console.log('There was an error!');
    };





    </script>
    </head>
    <body>
        <div>URL:<a id="url"></a></div>
        <hr>
        <div>
            <pre id="output">
                <!-- content will appear here -->
            </pre>
        </div>
    </body>
</html>

The chrome console shows "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." as a result along with 401 status.

Was wondering if I am missing with the code?

Thank you

possible duplicate of [No 'Access-Control-Allow-Origin' header is present on the requested resource.' Why is it not showing when I use POSTMAN?](http://stackoverflow.com/questions/20035101/no-access-control-allow-origin-header-is-present-on-the-requested-resource-w) — martynas, Jun 20 '14 at 22:33
[Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) — epascarello, Jun 20 '14 at 22:41

score 2 · Accepted Answer · answered Jun 20 '14 at 22:40

2

It seems that you're sending a request to this REST API link from some HTML file that's not on the same domain. Since there's no "Access-Control-Allow-Origin" header on that link and you're sending a request to it from a different domain, for security reasons, you won't get a coherent response from it, but instead will get that error and a 401 error since you're unauthorized to look at the contents of that link.

There's unfortunately no way around that; that link is simply not meant to be requested to from outside domains.

answered Jun 20 '14 at 22:40

Noble Mushtak

1,784
10
22

I make a request from my Browser to an Api-Endpoint and get a "No 'Access-Control-Allow-Origin' header ..." Error. But if I make the same request from also a different server than the Enpoint via php (curl), it works. Actually shouldn't be both not working? What's the difference? – Yves Aug 04 '15 at 19:33
2

The "Access-Control-Allow-Origin" header is only enforced by the browser, so you will only get that error if you're making an AJAX request from JavaScript. You won't get that error from PHP because PHP doesn't enforce the "Access-Control-Allow-Origin" header, so you can send requests to an API from PHP regardless of the "Access-Control-Allow-Origin" header. – Noble Mushtak Aug 05 '15 at 13:20

Javascript: " No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "

1 Answers1