CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user3761728
user3761728

Reputation: 97

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

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

Upvotes: 1

Views: 14631

Answers (1)

Noble Mushtak
Noble Mushtak

Reputation: 1784

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.

Upvotes: 2

Related Questions