ホームページ  >  に質問  >  本文

netlify フォームを使用して 404 (VueJs 3 + Vite + VueRouter + Netlify) を取得します

<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>
P粉564301782P粉564301782412日前426

全員に返信(1)返信します

  • P粉470645222

    P粉4706452222023-09-03 10:33:53

    成功しましたか? 私も同様の問題を抱えていましたが、action='/success/' パラメータを削除し、Netlify を独自のページにリダイレクトさせることによってのみ解決できました...

    カスタム ajax も機能しません。'/' のフェッチで 404...

    が返されるためです。

    まだカスタム ページまたはカスタム ハンドラーで実行中です...何か見つけたらポストバックします。

    (Vite React Netlify を使用しています) ルーター パッケージはありません... vite.config.ts

    pages/success ページを取得できます。 リーリー

    返事
    0
  • キャンセル返事