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

0 votes

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?

Jun 8, 2020 in Java-Script by kartik
• 37,520 points
24,065 views

2 answers to this question.

0 votes

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.

answered Jun 8, 2020 by Niroj
• 82,880 points
0 votes

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

answered Feb 9, 2022 by Soham
• 9,710 points

Related Questions In Java-Script

0 votes
1 answer

How to find event listeners on a DOM node when debugging or from the JavaScript code?

Hii @kartik, It is possible to list all ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
128,393 views
0 votes
1 answer

Error:Origin is not allowed by Access-Control-Allow-Origin

Hello @kartik, The easiest way to handle this ...READ MORE

answered Jun 18, 2020 in Java-Script by Niroj
• 82,880 points
8,896 views
0 votes
0 answers

How does Access-Control-Allow-Origin header work?

Until now my understanding of its semantics ...READ MORE

May 11, 2022 in Java-Script by Kichu
• 19,050 points
832 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
22,938 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18, 2020 in Laravel by Niroj
• 82,880 points
2,959 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
2,894 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23, 2020 in Laravel by Niroj
• 82,880 points
44,358 views
0 votes
1 answer

Error:No Access-Control-Allow-Origin header is present on the requested resource node.js

Hello @kartik, My guess is that you're serving ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,880 points
4,620 views
0 votes
1 answer

Error:Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers

Hello @kartik, Access-Control-Allow-Headers does not allow * as accepted value. Instead of ...READ MORE

answered Jul 6, 2020 in Java-Script by Niroj
• 82,880 points
2,394 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP