PetFinder API CORS 问题答案

【问题标题】：PetFinder API CORS IssuePetFinder API CORS 问题
【发布时间】：2019-06-03 15:48:47
【问题描述】：

我正在使用 PetFinder 的 API (https://www.petfinder.com/developers/api-docs) 来抓取一些狗的照片。他们的 API 非常简单。我的问题是CORS。我有一个 Chrome 扩展程序，它告诉 Chrome 不要打扰，所以我可以在本地查看我的工作，但如果我可以将它扔到 GitHub 页面或与其他人共享它，他们可以克隆它并运行它，我希望它。

我使用create-react-app 构建了应用程序。基本上这是一个获取请求。我可以使用简单的 JSON 来完成，或者我可以添加 &callback=? 来获取他们的 JSONP。我已经进行了一些挖掘，包括第二个参数和信息以绕过 CORS，但我无法坚持着陆。如果服务器端的 HEADERS 不正确，我是否只是陷入了潜在的不透明响应？有没有更好的方法来使用 JSONP 做到这一点？有人可以告诉我我的选择吗？

componentDidMount() {
  fetch('http://api.petfinder.com/pet.find?key=superSecretKeyForMeToKnow&animal=dog&location=94103&output=full&format=json')
  .then(response => response.json())
  .then(petFinderJson => this.setState({ dogs: petFinderJson.petfinder.pets.pet }));
}

【问题讨论】：

你需要一个代理。
@Baruch 是的，我看到了一些东西。在 package.json 文件中添加proxy: api.petfinder.com？还是别的什么？
你可以这样做，但我建议使用setupProxy.js，如下所述：facebook.github.io/create-react-app/docs/…

标签： javascript reactjs api cors

【解决方案1】：

巴鲁克是对的。我需要一个代理。

我只需将"proxy": "http://api.petfinder.com" 添加到package.json，然后修改获取请求以排除该行。所以www.google.com/search 在获取请求中会变成/search！

成功了！哇！

【讨论】：