netlify フォームを使用して 404 (VueJs 3 + Vite + VueRouter + Netlify) を取得します
P粉564301782
2023-09-02 15:59:41
<p>ContactView.vue ページ <code>src/views/ContactView.vue</code> に次のフォームがあります。
感謝のメッセージを含むカスタム ページにリダイレクトしたいです <code>src/views/SuccessView.vue</code></p>
<pre class="brush:php;toolbar:false;"><form name="contact-form" action="/success" method="POST" data-netlify="true" data -netlify-honeypot="ボットフィールド">
<input type="hidden" name="contact-form" value="contact-form" />
<div class="grid md:grid-cols-2 md:gap-6">
<div class="相対 z-0 w-full mb-6 グループ">
<input type="text" name="first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border -b-2 ボーダー-パインの外観-なし フォーカス:アウトライン-なし フォーカス:リング-0 フォーカス:ボーダー-バブルガムピア" placeholder=" " " 必須 />
<label for="first_name" class="peer-focus:font-mediumAbsolute text-sm text-gray-500duration-300translate-y-6scale-75top-3 -z-10origin -[0] ピアフォーカス:左-0 ピアフォーカス:テキストバブルガム ピア-プレースホルダー表示:スケール-100 ピア-プレースホルダー表示:翻訳-y-0 ピアフォーカス:スケール-75 ピアフォーカス:-翻訳-y-6">名</label>
</div>
<div class="相対 z-0 w-full mb-6 グループ">
<input type="text" name="last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border -b-2 ボーダー-パインの外観-なし フォーカス:アウトライン-なし フォーカス:リング-0 フォーカス:ボーダー-バブルガムピア" placeholder=" " " 必須 />
<label for="last_name" class="peer-focus:font-mediumAbsolute text-sm text-gray-500duration-300translate-y-6scale-75top-3 -z-10origin -[0] ピアフォーカス:左-0 ピアフォーカス:テキストバブルガム ピア-プレースホルダー表示:スケール-100 ピア-プレースホルダー表示:翻訳-y-0 ピアフォーカス:スケール-75 ピアフォーカス:-翻訳-y-6">姓</label>
</div>
</div>
<div class="相対 z-0 w-full mb-6 グループ">
<入力タイプ="メール"名前="メール" id="フローティングメール" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appeared-none focus:outline-none focus:ring-0 focus :ボーダーバブルガムピア"プレースホルダー=" 「必須 />
<label for="メール" class="peer-focus:font-mediumAbsolute text-sm text-gray-500duration-300translate-y-6scale-75top-3 -z-10origin-[0]peer-focus:left -0 ピア-フォーカス:テキスト バブルガム ピア-プレースホルダー-表示:スケール-100 ピア-プレースホルダー-表示:translate-y-0 ピア-フォーカス:スケール-75 ピア-フォーカス:-translate-y-6">メールアドレス</ラベル>
</div>
<div class="相対 z-0 w-full mb-6 グループ">
<textarea type="テキスト"名前= "テキストエリア" id="floating_ext_area" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appeared-none focus:outline-none focus:ring-0 focus :ボーダーバブルガムピア"プレースホルダー=" 「必須 />
<label for=「テキストエリア」 class="peer-focus:font-mediumAbsolute text-sm text-gray-500duration-300translate-y-6scale-75top-3 -z-10origin-[0]peer-focus:left -0 ピア-フォーカス:テキスト バブルガム ピア-プレースホルダー-表示:スケール-100 ピア-プレースホルダー-表示:translate-y-0 ピア-フォーカス:スケール-75 ピア-フォーカス:-translate-y-6">メッセージ</label>
</div>
<button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-mediumrounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">送信</button>
</form></pre>
<p>そこにあるすべてのガイドと関連フォーラムに従いましたが、誰も助けてくれませんでした。 </p>
<p>この記事を読みましたが、私には効果がないようです。 </p>
<p>ほとんどのガイドやチュートリアルでは、正確な HTML クローンが「パブリック」HTML のスケルトンとして言及されているため、index.html でも同様のことを行いました</p>
<pre class="brush:php;toolbar:false;"><body>
<form netlify netlify-honeypot="bot-field" hidden name="contact-form" value="contact-form" method="POST" action="/success" >
<input type="text" name="first_name" />
<input type="text" name="last_name" />
<input type="email" name="email" />
<テキストエリア名="テキストエリア"></テキストエリア>
<button type="送信"></button>
</フォーム>
<div id="app"</div>
<script type="module" src="/src/main.js"></script>
</body></pre>
<p><code>random-netlify-name-784120.netlify.app</code> のフォームに入力した直後に入力しようとすると、黒い画面にこの応答が表示されます。 < /p>
<p>すべてをスムーズに進めるにはどうすればよいですか? </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
成功しましたか? 私も同様の問題を抱えていましたが、
action='/success/'パラメータを削除し、Netlify を独自のページにリダイレクトさせることによってのみ解決できました...カスタム ajax も機能しません。
が返されるためです。'/'のフェッチで 404...まだカスタム ページまたはカスタム ハンドラーで実行中です...何か見つけたらポストバックします。
(Vite React Netlify を使用しています) ルーター パッケージはありません...
でvite.config.tspages/successページを取得できます。 リーリー