Why doesn t Postman get a No Access-Control-Allow-Origin header is present on the requested resource error when my JavaScript code does

Question

I am trying to do authorization using JavaScript by connecting to the RESTful API built-in Flask. However, when I make the request, I 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.

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);
    });

I know that the API or remote resource must set the header, but why did it work when I made the request via the Chrome extension Postman?

Answer 1

Hello @kartik,

It's very simple to solve if you are using PHP. Just add the following script in the beginning of your PHP page which handles the request:

<?php header('Access-Control-Allow-Origin: *'); ?>

If you are using Node-red you have to allow CORS in the node-red/settings.js file by un-commenting the following lines:

httpNodeCors: {
 origin: "*",
 methods: "GET,PUT,POST,DELETE"
},

If you are using Flask same as the question; you have first to install flask-cors

$ pip install -U flask-cors

Then include the Flask cors in your application.

from flask_cors import CORS

A simple application will look like:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

Hope it helps!

You can also ask if you have some more queries related to javascript or you can join our Java training class and ask the top instructors by yourself.

Answer 2

My understanding is that you are using a different domain than the one your page is present on by using the XMLHttpRequest. This is enabling the blocking of it due to the reason that it normally permits a request for security reasons in the same origin. You will have to try a different method in order to enhance a cross-domain request. Share your credentials with CORS and then Add credentials: 'include' to the fetch options like mentioned below. This will include the cookie with the request.

fetch('https://example.com', {

 mode: 'cors',

 credentials: 'include'

})

Access-Control-Allow-Origin must be set to a specific origin (no wildcard using *) and must set Access-Control-Allow-Credentials to true.

HTTP/1.1 200 OK

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Credentials: true