在 React 中使用外部节点模块时遇到 CORS 问题

Question

问题

我在我的 React 应用程序中使用howlongtobeat npm 模块，但是当我按照 howlongtobeat 文档中记录的方式进行搜索查询时，我在控制台中收到以下 CORS 错误：
Access to XMLHttpRequest at 'https://howlongtobeat.com/search_results.php' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是我一直在测试的基本 React 应用程序：

 import { HowLongToBeatService, HowLongToBeatEntry } from "howlongtobeat"; let hltbService = new HowLongToBeatService(); function App() { hltbService.search("halo").then((result) => console.log(result)); return ( <div>something</div> ); } export default App;

我尝试过的事情

• 我在 Vanilla JavaScript 文件中使用howlongtobeat节点模块进行了测试，并且效果很好。 所以这个问题似乎只在 React 中影响我。
• 我尝试了 Chrome 插件Allow CORS: Access-Control-Allow-Origin并在本地修复它，但显然无法在生产中工作（我正在尝试部署到 GitHub 页面）。
• 我尝试在节点包的js文件中修改 URL 以使用cors-anywhere 代理，但我的应用程序似乎没有接收到我对节点模块文件所做的更改。
• 我尝试在我的package.json中添加一个代理条目（例如"proxy": "localhost:3000" ），但这似乎不起作用。 我也不确定我应该在这里输入什么 URL （我试过https://howlongtobeat.com以及上面托管的代理。

---

关于如何解决这个问题的任何想法？

Answer 1

您正在使用的 web 服务正在阻止其他站点访问其数据客户端。 如果没有来自该服务的适当Access-Control-*标头，您将无法直接执行此操作。

我尝试在我的 package.json 中添加一个代理条目（例如“proxy”：“localhost:3000”）

您走在正确的道路上，但除非您实际上正在运行正在读取此配置的服务器，否则这无关紧要。

您需要运行某种代理服务器将数据代理到您可以控制的来源，以便您的页面托管在同一来源，或者您在响应中有类似Access-Control-Allow-Origin: *的内容标题。

另请参阅： https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS