【Vue.js】googleフォームにpostする際、エラーが出る

Question

前提

Vue.jsを用いてコンタクトフォームを作成しています。
googleフォーム経由で取得できるようにしたいのですが、400エラーが出てうまくいきません。

実現したいこと

• googleフォーム経由でお問い合わせ内容の取得

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

Error: Request failed with status code 400
    at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16:15)
    at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:17:12)
    at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:66:7)

該当のソースコード

<script>
import axios from "axios";
export default {
	name: "contact",
	data() {
		return {
			form: {
				name: "",
				email: "",
				message: "",
			},
			formInfo: {
				action:
					"https://docs.google.com/forms/.../formResponse",
				name: "entry.20056XXXXX",
				email: "entry.10457XXXXX",
				message: "entry.83933XXXXX,
			},
			checked: false,
		};
	},
	
	methods: {
		submitForm() {
			if (
				this.form.name &&
				this.form.email &&
				this.form.message &&
				this.checked
			) {
				const submitParams = new FormData();

				Object.keys(this.form).forEach((key) => {
					submitParams.append(this.formInfo[key], this.form[key]);
				});

				const CORS_PROXY = "https://sheltered-castle-40244.herokuapp.com/";
				const GOOGLE_FORM_ACTION = this.formInfo.action;

				axios
					.post(CORS_PROXY + GOOGLE_FORM_ACTION, submitParams)
					.then(() => {
						console.log("送信しました");
						this.$router.push("Thanks");
					})
					.catch((e) => {
						console.log(e);
						alert("送信に失敗しました");
					});
			}
		},
	},
};
</script>

試したこと

• CORSプロキシの設定
• FormDataを作成して、objectやjsonなどに変更

よろしくおねがいします。

Answer 1

CSRF（クロスサイトリクエストフォージェリ）はCORSよりも前に覚えるはずの基礎知識。

現代のまともなフォームならそんなやり方で送信できることはない。
プログラムによるフォーム送信は全部スパム扱い。

Comments

[oscar1164]

回答ありがとうございます。
google formを用いたお問い合わせフォームの作成はすべてアンチパターンという認識でいいですか？
webで検索したら結構出てくるのでメジャーなやり方だと思っていました。