使用 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="bot-field">
<input type="hidden" name="contact-form" value="contact-form" />
<div class="grid md:grid-cols-2 md:gap-6">
<div class="relative z-0 w-full mb-6 group">
<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 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
<label for="first_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">First name</label>
</div>
<div class="relative z-0 w-full mb-6 group">
<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 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
<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=“相对z-0 w-full mb-6组”>
<输入类型=“电子邮件”姓名=“电子邮件” id="floating_email"; class=”block py-2.5 px-0 w-full text-sm text-gray-900 bg-透明边框-0 border-b-2 border-pine 外观-none focus:outline-none focus:ring-0 focus :边界-泡泡糖同行”占位符=” ”必填>>
<标签=“电子邮件”类=“对等焦点:字体中绝对文本-sm文本灰色-500持续时间-300变换-翻译-y-6缩放-75顶部-3-z-10原点-[0]对等焦点:左-0peer-focus:text-bubblegumpeer-placeholder-shown:scale-100peer-placeholder-shown:translate-y-0peer-focus:scale-75peer-focus:-translate-y-6>>电子邮件地址标签>
<div class=“相对z-0 w-full mb-6组”>
;
<button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</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" />
<textarea name="textarea"></textarea>
<button type="submit"></button>
</form>
<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>
你成功了吗? 我遇到了类似的问题,只能通过删除
action='/success/'
参数并让 Netlify 重定向到它自己的页面来解决...自定义 ajax 也不起作用,因为对
'/'
的提取返回 404...仍然在自定义页面或自定义处理程序上运行......如果我找到一些东西,我会发回来。
(我正在使用 Vite + React + Netlify)没有路由器包... 我能够在我的
中获得一个vite.config.ts
pages/success
页面