Why does my JavaScript code receive a No Access-Control-Allow-Origin header is present on the requested resource error while Postman does not

Question

I'm attempting to use JavaScript to connect to Flask's built-in RESTful API in order to perform authorization. I receive the following problem when I submit the request, though:

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.

I am aware that the remote resource or API must set the header, so why did the Postman Chrome extension make the request successful?

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

Answer 1

If I understand you well, you are sending an XMLHttpRequest to a domain other than the one that hosts your page. Because of security concerns, the browser is blocking it instead of typically allowing a request from the same origin. To make a cross-domain request, you must take a distinct action.

They are not constrained by this policy when you use Postman. Cross-Origin XMLHttpRequest citation:

Regular web pages can transmit and receive data from distant servers using the XMLHttpRequest object, but they are constrained by the same origin policy. There are more options for extensions. If an extension first asks cross-origin rights, it can communicate with external servers that are not part of its origin.