JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器中时没有 [重复]答案

【问题标题】：CORS error with JS async/await but not when I paste the URL directly into browser [duplicate]JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器中时没有 [重复]
【发布时间】：2021-12-20 22:30:23
【问题描述】：

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

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

这是显示 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>

对我做错了什么或为什么我不能以这种方式获取此信息有任何想法吗？？

我将监控并回答任何问题....

非常感谢！

【问题讨论】：

使用browser console (dev tools)（点击F12）并阅读任何错误。开发工具提供了一个 Network 选项卡。网络选项卡显示什么？响应是什么样的？看起来 MIME 类型不正确。
@KenY-N 如何打印异常详细信息？我是新人
@SebastianSimon 我得到了 403 禁止...但是当我直接在浏览器中运行时，为什么我没有得到呢？
@TimothyBeckett 由于 CORS？
这样做：enable-cors.org/server_php.html

标签： javascript async-await xampp

【解决方案1】：

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

可以在这个网站上找到一个很好的参考：https://enable-cors.org/server_php.html

【讨论】：