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

Question

问题

我在React应用程序中使用了howlongtobat npm模块，但当我按照howlongtoeat文档中的文档进行搜索查询时，我在控制台中收到以下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 Pages(
• 我尝试修改节点包的js文件中的URL以使用cors-anywhere代理，但我的应用程序似乎没有接收到我对节点模块文件所做的更改
• 我尝试在package.json(例如"proxy": "localhost:3000"(中添加一个代理条目，但似乎不起作用。我也不确定我应该在这里输入什么URL(我试过了https://howlongtobeat.com以及我从上面托管的cors-anywhere代理

---

关于如何解决这个问题有什么想法吗？

Answer 1

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

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

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

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

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