PetFinder API CORS問題

Question

我正在使用PetFinder的API（ https://www.petfinder.com/developers/api-docs ）捕獲一些狗的照片。 他們的API非常簡單。 我的問題是CORS。 我有一個Chrome擴展程序，該程序告訴Chrome不要打擾，這樣我就可以在本地查看我的工作，但是如果我可以將其扔到GitHub頁面或與他人共享它，並且他們可以克隆並運行它，則希望這樣做。

我使用create-react-app構建了該應用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 }));
}

Answer 1

巴魯克是對的。 我需要一個代理。

我只需要在package.json添加"proxy": "http://api.petfinder.com" ，然后修改獲取請求以排除該行。 因此www.google.com/search將成為獲取請求中的/search ！

做到了！ 嗚！