Verwenden Sie das Netlify-Formular, um 404 zu erhalten (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="bot-field">
<Eingabetyp="versteckt" name="Kontaktformular" value="Kontaktformular" />
<div class="grid md:grid-cols-2 md:gap-6">
<div class="relative z-0 w-full mb-6 group">
<Eingabetyp="Text" name="vorname" 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 border-pine aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich />
<label for="vorname" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left -0 peer-focus:text-bubblegum peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">First Name</label>
</div>
<div class="relative z-0 w-full mb-6 group">
<Eingabetyp="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 border-pine aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich />
<label for="last_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left -0 peer-focus:text-bubblegum peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last Name</label>
</div>
</div>
<div class="relative z-0 w-full mb-6 group">
<Eingabetyp="E-Mail" name="email" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich />
<label for="email" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left -0 peer-focus:text-bubblegum peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">E-Mail Adresse</label>
</div>
<div class="relative z-0 w-full mb-6 group">
<textarea type="text" name="textarea" 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 aussehen-none fokus:outline-none fokus:ring-0 fokus :border-bubblegum peer" placeholder=" " erforderlich />
<label for="textarea" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left -0 peer-focus:text-bubblegum peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Ihre Nachricht</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">Senden</button>
</form></pre>
<p>Ich habe alle Anleitungen dort und in verwandten Foren befolgt, aber niemand konnte mir helfen. </p>
<p>Ich habe diesen Artikel gelesen, aber er scheint bei mir nicht zu funktionieren. </p>
<p>Die meisten Leitfäden und Tutorials erwähnen exakte HTML-Klone als Skelette im „öffentlichen“ HTML, also habe ich in index.html etwas Ähnliches gemacht</p>
<pre class="brush:php;toolbar:false;"><body>
"form netlify-honeypot="bot-field"
<input type="text" name="first_name"
<input type="text" name="last_name"
<input type="email" name="email"
<textarea name="textarea"></textarea>
<button type="submit"></button>
</form>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body></pre>
<p>Wenn ich versuche, das Formular in <code>random-netlify-name-784120.netlify.app</code> auszufüllen, wird unmittelbar nach dem Ausfüllen ein schwarzer Bildschirm mit dieser Antwort angezeigt. < /p>
<p>Wie sorge ich dafür, dass alles reibungslos läuft? </p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你成功了吗？ 我遇到了类似的问题，只能通过删除
action='/success/'参数并让 Netlify 重定向到它自己的页面来解决...自定义 ajax 也不起作用，因为对
'/'的提取返回 404...仍然在自定义页面或自定义处理程序上运行......如果我找到一些东西，我会发回来。
（我正在使用 Vite + React + Netlify）没有路由器包... 我能够在我的
中获得一个vite.config.tspages/success页面build: { ..., rollupOptions: { input: { main: resolve(root, 'index.html'), success: resolve(root, 'pages', 'success', 'index.html'), }, }