REST API Post request on single HTML page

Question

I am trying to submit a post request using an endpoint URL. I am sending the content-type as application/json and two header values for username and password. When I try to access it via Postman, I get 200 response code along with tokenId and successUrl but when the same is being done via the below JavaScript code, I get 401. The same is working when I try to get is done via JSP and Java. Me, not being a Javascript expert, am unable to figure out the reason. I read the CORS articles and am not sure why cross-domain is not a problem with Java/JSP code but occurs for JavaScript. Below is the code:

<!DOCTYPE html>
<html>
<body>

<h2>REST</h2>

<button type="button" onclick="myFunc()">Request data</button>

<p id="demo"></p>
 
<script>
function myFunc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "Endpoint URL entered here", true);
  xhttp.setRequestHeader("Content-type", "application/json");
  xhttp.setRequestHeader("X-OpenAM-Username", "username entered here");
  xhttp.setRequestHeader("X-OpenAM-Password", "password entered here");
  xhttp.send();
}
</script>

</body>
</html>

The error that comes on Chrome browser is as below:

Access to XMLHttpRequest at 'Endpoint URL' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

a.html:23 POST 'Endpoint URL' net::ERR_FAILED

EDIT1: The error that comes on Firefox browser is as below:

XHROPTIONS 'Endpoint URL' [HTTP/1.1 401 Unauthorized 2025ms]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 'Endpoint URL'. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at 'Endpoint URL'. (Reason: CORS request did not succeed).

Please let me know what exactly am I doing wrong.

score 1 · Answer 1 · answered Nov 04 '20 at 18:03

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

As part of CORS, your browser will send what’s called a 'preflight request' to the server to see if it will accept your request. It’s checking for a few things— in this case, the server didn’t reply to the preflight with the 'Acess-Control-Allow-Origin' header, so your browser knows the request you’re trying to send will fail and blocks it from being sent.

This doesn’t happen outside of the browser environment— Postman doesn’t care if the server will respond with the appropriate headers or not.

If you have access to the server, you’ll need to configure a CORS policy that allows requests from your specific origin (website). Happy to help if you can provide a little more info about your set up.

So, the endpoint that I am hitting is ForgeRock SSO URL to authenticate the user. The username and password are passed via the headers. I am trying to run this directly from my system as it is a simple HTML page. Also, tried running it from localhost, but the same error in both the cases. I am not sure why this error is coming when trying to run it via JavaScript approach, as the Java and JSP code works fine without any CORS or other error. — Ankit, Nov 05 '20 at 05:53
Firefox error also gives 401, which makes me think something is wrong with the code I am using. — Ankit, Nov 05 '20 at 08:15

REST API Post request on single HTML page

1 Answers1