[Solved-6 Solutions] Why does my JavaScript get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not ? - javascript tutorial

To authorization using JavaScript by connecting to the RESTful API built in Flask. However, when we make the request, we get the following error:

XMLHttpRequest cannot load myApiUrl. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is 'null' don't allowed to access.

We know that the API or remote resource must set as the header. This is the request code:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

Origin 'null' is therefore not allowed access. application.rb is configuration.

config.middleware.insert_before ActionDispatch::Static, Rack::Cors do
    allow do
      origins '*'
      resource '*', headers: :any, methods: [:get, :post, :options]
    end
  end

• XMLHttpRequest to a different domain than your page is on.
• The browser is blocking to allows a request in the same origin for a security reasons.
• We need to do something different when we want to do a cross-domain request.
• Using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
• Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they are limited by the same origin policy.
• Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

This command in run window chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security this will open a new chrome browser which allow access to no 'access-control-allow-origin' header request.

If we can deal with JSON in return, then try to using JSONP (note the P at the end):

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

Using Node.js:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

$.ajax({type: "POST" - Calls OPTIONS
$.post( - Calls POST
Both are different Postman calls "POST" properly but when we call it will be "OPTIONS"

For c# web services - webapi
Please add the following code in our web.config file under <system.webServer> tag. This will work

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

Please make sure we are not doing any mistake in the ajax call jQuery

$.ajax({
    url: 'http://mysite.microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Note: Downloading content from third party website then this will not help. The following code but not in JavaScript.

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.microsoft.sample.xyz.com/api/mycall");