JS异步/等待的CORS错误,但当我将URL直接粘贴到浏览器时没有[重复]

Posted

技术标签:

【中文标题】JS异步/等待的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异步/等待的CORS错误,但当我将URL直接粘贴到浏览器时没有[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 fetch 中执行跨域请求以及异步等待? (CORS 错误)[重复]

将 Node.js 流错误事件传播到异步等待样式代码

当我根据 DynDNS url 名称而不是 IP 发出 axios 请求时,为啥会出现 CORS 错误?

部署后 HEROKU 出现 CORS 问题

直接从 vue.js 中的 URL 加载页面时找不到 URL [重复]

CORS 策略已阻止从源 URL 访问 URL 的 XMLHttpRequest [重复]