0

I'm running two Flask Apps on my local machine.

1) My test client website (on port 5001)

2) My API (on port 5000)

If I type 127.0.0.1:5000/search/ into my browser, I get the following:

Test Hello World

If I type 127.0.0.1:5001 into my browser I get an ordinary web page containing the following HTML code (this all looks OK):

<!DOCTYPE html>
<html>
<body>

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

<p id="demo">TEST</p>

<script>

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {

      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "127.0.0.1:5000/search/", true);
  xhttp.send();
}
</script>

</body>
</html>

As you can see the HTTP request is sent to 127.0.0.1:5000/search/ which is tested and working in the browser and should return Test Hello World but unfortunately nothing happens.

Basically, I click the "Request Data" button (see above), and absolutely nothing happens.

Any ideas why? I've been stuck on this for hours.

Greg Peckory
  • 375
  • 1
  • 7
  • 17

2 Answers2

2

For security reasons, browsers restrict cross-origin HTTP requests initiated from within scripts. For example, XMLHttpRequest follows the same-origin policy. So, a web application using XMLHttpRequest could only make HTTP requests to its own domain. To improve web applications, developers asked browser vendors to allow XMLHttpRequest to make cross-domain requests.

These resources may be helpful;
HTTP access control (CORS)
Using CORS

user1577263
  • 449
  • 5
  • 8
0
"127.0.0.1:5000/search/"

Your URL is missing its scheme. You need to prefix that with http://.

If you open your browser's developer tools and look at the Network tab, you should see a 404 error listed there.

Once you fix that, it is likely that you'll have a Cross Origin error as described in this question

Community
  • 1
  • 1
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335