获取 php 页面时返回 CORS 错误的函数答案

【问题标题】：fetch function returning CORS error while fetching a php page获取 php 页面时返回 CORS 错误的函数
【发布时间】：2020-08-13 15:54:49
【问题描述】：

我正在做一个以这种方式使用函数 fetch 的 ReactJs 应用程序：

我的服务器上有一个打印随机报价的 .php 页面，我想从托管在同一服务器上的 React 应用程序中获取此报价。但这很奇怪，我会解释一下：

1) 从我的电脑：let newText = await fetch("https://cors-anywhere.herokuapp.com/http://www.MYURL.com/actionv/API/aov_API.php"); 将按预期工作，如果我删除 https://cors-anywhere.herokuapp.com/ 部分，它将无法工作（不知道为什么）

2) 即使我使用 https://cors-anywhere.herokuapp.com/ 部分，我使用 npm run build 构建的服务器上的完全相同的应用程序也根本无法运行...

“不起作用”表示我收到此错误：

(index):1 访问 fetch at 'http://www.MYURL.com/actionv/API/aov_API.php'（重定向自来自原点“http://www.MYURL.com”的“https://cors-anywhere.herokuapp.com/http://www.MYURL.com/actionv/API/aov_API.php”）已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。 App.js:8 GET http://www.MYURL.com/actionv/API/aov_API.php net::ERR_FAILED asyncToGenerator.js:6 Uncaught (in promise) TypeError: Failed to fetch

完整功能：

function App(){
  async function updateQuote(type){
    let newText = await fetch("https://cors-anywhere.herokuapp.com/http://www.MYURL.com/actionv/API/aov_API.php");
    let msg = await newText.text();
    console.log(msg);
    setQuoteText(JSON.stringify(msg));
  }

【问题讨论】：

" 它不起作用（不知道为什么..）" ....你有没有继续研究 CORS 是什么？然后你可能会知道为什么，并且更好地知道如何修复它（或者至少更好地知道为了尝试修复它还需要研究什么）。 developer.mozilla.org/en-US/docs/Web/HTTP/… 也可以帮到你
另外，您没有准确地告诉我们您遇到了什么错误。所以我假设这是一个普遍的 CORS 错误，但如果你准确地告诉我们正在发生的事情会更好。
感谢您的回答，您能告诉我如何给您更精确的错误吗？这就是我在浏览器中得到的全部内容..
对不起，愚蠢的我，我错过了你的错误，因为你把它当作代码而不是引用。稍等一下，我将编辑问题以更符合预期的方式对其进行格式化
无论如何，正如错误所说，您的 PHP 响应中缺少标头。您是否研究过 CORS，甚至 google 错误消息？然后你就会知道 CORS 是什么以及它的含义。这为您提供了更好的修复机会。已经有很多可用的信息。阅读我第一条评论中的两个链接，这应该会给你一个技术概述，然后是一个示例 PHP 实现。

标签： javascript php reactjs cors fetch

【解决方案1】：

Here 我发现你需要在你的 .php 文件的顶部添加这个：

header('Access-Control-Allow-Origin: *');

它允许从同一来源获取

（感谢 ADyson 提供链接）

如果有人认为这是一个安全问题，请告诉我！谢谢

【讨论】：