Axios post時の403エラー

Question

エラー発生経緯

NetlifyにデプロイしていたアプリをXserverに移行してからフォームの送信時にエラーが発生するようになりました

前提・実現したいこと

Xserverでフォームの送信を正常に行いたい

発生している問題・エラーメッセージ

POST https://cors-anywhere.herokuapp.com/https://docs.google.com/forms/xxxxxxxx/formResponse 403 (Forbidden)

該当のソースコード

const params = new FormData();
params.append("entry.579605838", this.name);
params.append("entry.1037036830", this.email);
params.append("entry.978839735", this.message);
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/";
const action ="https://docs.google.com/forms/xxxxxxxxx/formResponse";
axios.post(CORS_PROXY + action, params)
.then(() => {
            this.$router.push("/thanks/");
          })
.catch(({ response }) => {
            console.log(response);
          });

エラーの仮説がうまく立てられないのヒントをお願いします????‍♂️

Answer 1

cors-anywhereのパブリックサーバーが制限されているようです(#301)

できるだけ使用しないようにするほうがいいとのことですが自分でHerokuにホストすることができるようなのでホストし、そのURLをCORS_PROXYに設定すればいいと思います

Comments

[nabecima_8511]

ご回答ありがとうございます！
cors-anywhereについて調べた後、
https://cors-anywhere.herokuapp.com/corsdemo
にアクセスしてunlockのボタンを押したところ、
正常に動作するようになりました！

非常に助かりました、ありがとうございます！