[Solved-5 Solutions] Why does JavaScript get a “No 'Access-Control-Allow-Origin' header is present on the requested resource” error when Postman does not ?
Error Description:
- When we try to do 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 http://myApiUrl/login . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
- We know that the API or remote resource must set the header, but why did it work when we make the request via the Chrome extension Postman ?
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);
});
click below button to copy the code. By - JavaScript tutorial - team
Solution 1:
- We 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. We need to do something different when we want to do a cross-domain request.
- When we are 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're 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.
Solution 2:
- This is not a fix for production or when application has to be shown to the client, this is only helpful when UI and Backend development are on different servers and in production they are actually on same server. For example: While developing UI for any application if there is a need to test it locally pointing it to backend server, in that scenario this is the perfect fix. For production fix, CORS headers has to be added to the backend server to allow cross origin access.
- The easy way is to just add the extension in.
- Just enable this extension whenever we need to allow access to no 'access-control-allow-origin'header request.
Solution 3:
- In Windows, paste 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.
Solution 4:
- It's very simple to solve if we are using PHP Just add the following script in the beginning of the PHP page which handles the request:
<?php header('Access-Control-Allow-Origin: *'); ?>
click below button to copy the code. By - JavaScript tutorial - team
- Warning: This contains a security issue for the PHP file that it could be called by attackers. We have to use sessions and cookies for authentication to prevent your file/service against this attack. Our service is vulnerable to cross-site request forgery (CSRF).
Solution 5:
- There's a cross-domain issue using Ajax. We must be sure we are accessing the files on the same http:// path without www. (or access from http://www. and post to the same path including www. ) which the browser considers as another domain when accessing via a www. path. We are posting to a different domain and the browser blocks the flow because of the origin issue.
- If the API is not placed on the same host that you are requesting from, the flow is blocked, and we will need to find another way to communicate with the API.