JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器时却没有

Question

当我将 URL http://192.168.1.136:8080/epost_backend/api.php?method=getCategories 放入 chrome 时，它 returns 我构建的 API 的输出。

但是当我将完全相同的 URL 放入 javascript async/await 函数时，它总是陷入捕获错误...

这是显示 CORS 错误的网络选项卡：

这是 HTML/JS 文件：

<!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>

关于我做错了什么或为什么我不能通过这种方式获取此信息的任何想法？

我会关注并回答任何问题....

非常感谢！

Answer 1

您只需在 PHP 服务器上启用 CORS。您可以通过设置 headers 的数量来做到这一点。至少设置 Access-Control-Allow-Origin "*" 以允许所有来源向您的 PHP 服务器发出请求。

可以在此站点找到很好的参考：https://enable-cors.org/server_php.html

JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器时却没有

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

javascript

xampp

async-await