【React】axios.getでCloudFunctions呼び出し時に遭遇したエラーの対処法 #Network

初めに

ReactでCloudFunctions呼び出し時にエラーに遭遇したので解決策を記載します。

実行コード

今回はaxios.getを使って、呼び出しを行っています。

main.js

useEffect(()=>{
    axios.get("https://....")
      .then(res => {
        console.log(res.data);
      }).catch(error=>{
        console.log(error);
      })
},[])

上記コードを実行後以下のエラーが出力されました。

Error: Network Error

対処法

Cloud Functionの関数に以下のコードを記入してください。

res.append('Access-Control-Allow-Origin', ['*']);
res.append('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
res.append('Access-Control-Allow-Headers', 'Content-Type');

最後に

今後もGCP関連の投稿をしていくので、ぜひご覧ください。