No 'Access-Control-Allow-Origin' header is present on the requested resource. 401 error

Question

I have been trying to implement spell check by using the bing spell check api. I am getting a 401 error. The error is

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 401.

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type="text/javascript">
    function hi(){


        var params = {
            // Request parameters
            "mode": "{Spell}",
        };

        $.ajax({
             url: "https://api.cognitive.microsoft.com/bing/v5.0/spellcheck/?" + $.param(params),
             beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key","{0c6cb56a997b41d4958ace895a677729}");
            },
        crossDomain: false,
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        type: "POST",
        dataType: 'jsonp',

            // Request body
                data: {
            dataSpell: $("#textContent").val()},

        success : function(result){
            $("div").html(result); }
        //dataType: 'jsonp'
    });


    }
</script>

</head>
<body>
<textarea rows="4" cols="50" id="textContent" spell-check="true" placeholder="Type here"></textarea>
<button type="button" id="spellcheck" onclick="hi();" >Click Me!</button>
<div> </div>
</body>

</html>

you cannot send request to one website from webscript of another website unless the 3rd party website explicitly whitelist you. You should read about `Cross Domain Resource Sharing (CORS)` — Cerlin, Jul 22 '16 at 06:21

score 1 · Answer 1 · edited May 23 '17 at 12:00

{...} you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

Quoting answer from this thread, so check it out if you are still confused about why you are getting this error. You can learn how to bypass this using CORS here.

No 'Access-Control-Allow-Origin' header is present on the requested resource. 401 error

1 Answers1