CORS error with JS async/await but not when I paste the URL directly into browser

Question

When I put the URL http://192.168.1.136:8080/epost_backend/api.php?method=getCategories into chrome it returns the output from the API that I have built.

But when I put the exact same URL into a javascript async/await function, it always gets trapped in the catch error...

Here is network tab showing CORS error:

Here is the HTML/JS file:

<!doctype html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script>
  async function getCategories(){
    try{
      const res = await fetch("http://192.168.1.136:8080/epost_backend/api.php?method=getCategories")
      const output = await res.json()
      document.getElementById('result').innerHTML = output
    }
    catch{
      document.getElementById('result').innerHTML = "THERE WAS AN ERROR"
    }
  }
</script>
<body onLoad='getCategories()'>
  <h1>RESULT</h1>
  <div id='result'></div>
</body>
</html>

Any thoughts on what I am doing wrong or why I cant get this info this way??

I will be monitoring and answering any questions....

Thanks so much!

Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. The dev tools provide a **Network** tab. What does the Network tab reveal? What does the response look like? It looks like the MIME type is incorrect. — Sebastian Simon, Nov 08 '21 at 00:12
@SebastianSimon I am getting 403 forbidden... but how come I don't get that when I run directly in browser? — TimothyBeckett, Nov 08 '21 at 00:13
@SebastianSimon I don't even know what that means... I am hosting the files through Xampp on another machine of mine so I have control but IDK what that means... I have added a screen shot of the network tab and the error in the original question — TimothyBeckett, Nov 08 '21 at 00:22
@SebastianSimon I did not have http:// in front...now that I do I DO get this message about CORS but IDK what it means: Access to fetch at 'http://192.168.1.136:8080/epost_backend/api.php?method=getCategories' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. — TimothyBeckett, Nov 08 '21 at 00:27
Thanks @RandyCasburn I ended up adding Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization" to apache file to allow for all documents but your comment set me in the right direction... Please answer so I can accept and upvote... Thanks for your help! — TimothyBeckett, Nov 08 '21 at 00:54

score 0 · Accepted Answer · answered Nov 08 '21 at 00:58

You simply need to enable CORS on your PHP server. You do this by setting a number of headers. At a minimum set Access-Control-Allow-Origin "*" to allow all origins to make requests to your PHP server.

A good reference can be found at this site: https://enable-cors.org/server_php.html

CORS error with JS async/await but not when I paste the URL directly into browser

1 Answers1