ReactでpixabayのAPIを使って画像検索アプリケーションを作成した際にCORSエラーが発生
エラー内容
Access to XMLHttpRequest at 'https://pixabay.com/api/?q=animal' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
エラーの発生経緯
const App =()=>{
const [images, setImages]= useState([]);
const ApiKey = process.env.REACT_APP_PIXABAY_APIKEY;
const onSearchSubmit =async(term)=>{
try{
const params={
key: ApiKey,
q: term,
};
const response= await axios.get('https://pixabay.com/api/', { params });
setImages(response.data.hits);
上記のようにAPIキーを環境変数に記述し、App.jsに引き渡す処理を実装した際に発生。
色々と検索してみた結果以下の記事を発見、参考にしてみました。
なるほど。セキュリティ上の問題か〜賢い!そしておもしろい!
参考にしていじってみよう。
そして10年後・・・・(冗談)
サーバーを再起動したら解決
いろいろと試行錯誤した結果、「まさか!」と思い、
control+cして、yarn startしたところ、普通に解決しました。
なぜだ・・・。
一日中サーバー起動しっぱなしで作業してたからですかね?
詳しい方、教えていただけますと幸いです。。。
再起動したら改善されることは、よくあることなので覚えておこう。