JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器中时没有 [重复]
Posted
技术标签:
【中文标题】JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器中时没有 [重复]【英文标题】：CORS error with JS async/await but not when I paste the URL directly into browser [duplicate] 【发布时间】：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
【参考方案1】：
您只需要在您的 PHP 服务器上启用 CORS。您可以通过设置多个标题来做到这一点。至少设置 Access-Control-Allow-Origin "*" 以允许所有来源向您的 PHP 服务器发出请求。
可以在这个网站上找到一个很好的参考：https://enable-cors.org/server_php.html
【讨论】：
以上是关于JS async/await 的 CORS 错误，但当我将 URL 直接粘贴到浏览器中时没有 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何优雅处理 async await 错误——解读小而美的 awaitjs 库
在 Node.js 中使用 async/await 正确处理错误
如何优雅处理 async await 错误——解读小而美的 await-to-js 库
Async/await mvc express 使用 .catch() 处理错误的问题