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;"><양식 이름="문의 양식" 액션="/성공" 메소드="POST"; data-netlify="true"; data-netlify-honeypot="bot-field">
<입력 유형="숨김" name="연락처 양식" value="문의 양식" />
<div class="grid md:grid-cols-2 md:gap-6">
<div class="상대 z-0 w-전체 mb-6 그룹">
<입력 유형="텍스트" name="first_name" id="floating_first_name" 클래스 = "블록 py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine Appearance-none 포커스:개요-없음 포커스:ring-0 포커스 :border-bubblegum Peer" 자리 표시자=" " 필수 />
<label for="first_name" class="peer-focus:font-medium 절대 텍스트-sm text-gray-500 지속 시간-300 변환 -translate-y-6 scale-75 top-3 -z-10 원점-[0] 피어-초점:왼쪽 -0 피어-초점:text-bubblegum 피어-자리 표시자-표시:scale-100 피어-자리 표시자-표시:translate-y-0 피어-초점:scale-75 피어-초점:-translate-y-6>첫 번째 이름
</div>
<div class="상대 z-0 w-전체 mb-6 그룹">
<입력 유형="텍스트" 이름="성_이름" id="floating_last_name" 클래스 = "블록 py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine Appearance-none 포커스:개요-없음 포커스:ring-0 포커스 :border-bubblegum Peer" 자리 표시자=" " 필수 />
<label for="last_name" class="peer-focus:font-medium 절대 텍스트-sm text-gray-500 지속 시간-300 변환 -translate-y-6 scale-75 top-3 -z-10 원점-[0] 피어-초점:왼쪽 -0 피어-초점:text-bubblegum 피어-자리 표시자-표시:scale-100 피어-자리 표시자-표시:translate-y-0 피어-초점:scale-75 피어-초점:-translate-y-6>마지막 이름
</div>
</div>
<div class="상대 z-0 w-전체 mb-6 그룹">
<입력 유형="이메일" 이름="이메일" id="floating_email" 클래스 = "블록 py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine Appearance-none 포커스:개요-없음 포커스:ring-0 포커스 :border-bubblegum Peer" 자리 표시자=" " 필수 />
<label for="이메일" class="peer-focus:font-medium 절대 텍스트-sm text-gray-500 지속 시간-300 변환 -translate-y-6 scale-75 top-3 -z-10 원점-[0] 피어-초점:왼쪽 -0 피어-초점:text-bubblegum 피어-자리 표시자-표시:scale-100 피어-자리 표시자-표시:translate-y-0 피어-초점:scale-75 피어-초점:-translate-y-6>이메일 주소</라벨>
</div>
<div class="상대 z-0 w-전체 mb-6 그룹">
<텍스트 영역 유형="텍스트" 이름="텍스트 영역" id="floating_ext_area" 클래스 = "블록 py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine Appearance-none 포커스:개요-없음 포커스:ring-0 포커스 :border-bubblegum Peer" 자리 표시자=" " 필수 />
<label for="텍스트 영역" class="peer-focus:font-medium 절대 텍스트-sm text-gray-500 지속 시간-300 변환 -translate-y-6 scale-75 top-3 -z-10 원점-[0] 피어-초점:왼쪽 -0 피어-초점:text-bubblegum 피어-자리 표시자-표시:scale-100 피어-자리 표시자-표시:translate-y-0 피어-초점:scale-75 피어-초점:-translate-y-6>귀하의 메시지</라벨>
</div>
<버튼 유형="제출" 클래스="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candyfont-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">제출</button>
<p>여기에 있는 가이드와 관련 포럼의 모든 가이드를 따랐지만 아무도 나를 도와줄 수 없었습니다. </p>
<p>이 기사를 읽었지만 제게는 효과가 없는 것 같습니다. </p>
<p>대부분의 가이드와 튜토리얼에서는 "공개" HTML의 뼈대로서 정확한 HTML 복제본을 언급하므로 index.html에서도 비슷한 작업을 수행했습니다</p>
<pre class="brush:php;toolbar:false;"><body>
<form netlify netlify-honeypot="bot-field" 숨겨진 이름="contact-form" value="POST" action="/success" >
<입력 유형="텍스트" 이름="이름"
<입력 유형="텍스트" 이름="성명"
<입력 유형="이메일" 이름="이메일"
<텍스트 영역 이름="텍스트 영역"></textarea>
<버튼 유형="제출"></버튼>
</양식>
<div id="app"></div>
<스크립트 유형="모듈" src="/src/main.js"></script>
</body></pre>
<p><code>random-netlify-name-784120.netlify.app</code>에서 양식을 작성한 후 바로 작성하려고 하면 다음 응답과 함께 검은색 화면이 나타납니다. <
<p>모든 일을 원활하게 진행하려면 어떻게 해야 하나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
성공하셨나요? 비슷한 문제가 있었는데
action='/success/'매개변수를 제거하고 Netlify가 해당 페이지로 리디렉션되도록 해야만 문제를 해결할 수 있었습니다...Custom Ajax도 작동하지 않습니다.
'/'에 대한 가져오기가 404를 반환하기 때문입니다...아직 사용자 정의 페이지나 사용자 정의 핸들러에서 실행 중입니다...뭔가를 찾으면 다시 게시하겠습니다.
(저는 Vite + React + Netlify를 사용하고 있습니다.) 라우터 패키지가 없습니다... 내
中获得一个vite.config.tsvite.config.tspages/success에서pages/success페이지를 얻을 수 있습니다. 으아악