[FIXED] Cross-Origin Request Blocked: in javascript using XMLHttpRequest

Issue

I am trying to send a HTTP request in javascript using XMLHttpRequest and so I am using the following code in an HTML file. I have a server running which returns a dictionary of form {'test' : 'string'}.

<script type="text/javascript">
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "http://localhost:5000/test", true);
  xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
  xhr.send();

  xhr.onreadystatechange = processRequest;
  console.log(xhr.status)

  function processRequest(e)
  {
    if (xhr.readyState == 4)
    {
      alert(xhr.responseText);
    }
  }
</script>

However in spite of adding the header, I am getting a Cross-Origin Request Blocked: error in my console when I try to print xhr.status in the console it shows 0 as response. I am using flask server which shows a bad message error on using HTTPS, so I am using an HTTP request.

Solution

You can not control CORS from front end. You have to put the CORS module to your back end server.

check the link flask cors.

Answered By - Shawon Kanji