svelte/sapper - 404 在服务器外部的任何获取请求上
svelte/sapper - 404 on any fetch request outside of the server
使用 sapper 模板,我在 netlify 上部署了我的应用程序。想把netlify forms和sapper集成,所以用了docs form结构
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Name<input type="text" bind:value={$user.name} /></label>
</p>
<p>
<label>E-mail<input type="text" bind:value={$user.email} /></label>
</p>
<p>
<label>Telephone<input type="text" bind:value={$user.phone} /></label>
</p>
<input type="hidden" name="form-name" value="contact" />
<button on:submit|preventDefault={submitForm} type="submit">Reach out</button>
</form>
就这样,表单在提交时被发送到 netlify,但它是空的。因此,以文档中的示例为例,我尝试创建自己的 fetch post request
let submitForm =(event)=>{
let formdata = new FormData();
formdata.append('name',$user.name);
formdata.append('email',$user.email);
formdata.append('telephone',$user.telephone);
fetch("/contact/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formdata,
})
.then(() => alert("Success!"))
.catch(error => alert(error));
event.preventDefault();
}
同样,在我的路由中,我添加了带有导出 POST 函数的 js 文件。
export async function post(req, res, next) {
/* Initializes */
res.setHeader('Content-Type', 'application/json')
/* Retrieves the data */
var data = req.body
/* Returns the result */
return res.end(JSON.stringify(data))
}
无论我做什么,我总是在尝试提交表单时立即收到 404。我在获取中尝试了不同的 URL,我尝试在 js 文件中执行实际的 post,但没有任何效果。 sapper 网上好像没有其他人有这个问题,求助!谢谢!
为此您应该注意以下几点:
Polka(假设您使用的是 Polka)默认情况下不解析输入数据。您需要使用 body-parser
或等效包来解析输入正文。您可以使用提供的示例 here 作为基础,将 json()
函数替换为 urlencoded()
函数。
fetch()
函数将包含 POST
函数的路由文件的名称作为第一个参数。如果它存储在 contact.json.js
中,则等效调用将是 fetch('contact.json', opts)
。 Sapper 惯例是将所有服务器路由存储为 *.json.js
文件。
问题是值没有用引号引起来。我只是使用 es6 backdash 语法转换它们并且它有效!
formdata.append('name',`${user.name}`);
formdata.append('email',`${user.email}`);
formdata.append('telephone',`${user.telephone}`);
使用 sapper 模板,我在 netlify 上部署了我的应用程序。想把netlify forms和sapper集成,所以用了docs form结构
<form name="contact" method="POST" data-netlify="true">
<p>
<label>Name<input type="text" bind:value={$user.name} /></label>
</p>
<p>
<label>E-mail<input type="text" bind:value={$user.email} /></label>
</p>
<p>
<label>Telephone<input type="text" bind:value={$user.phone} /></label>
</p>
<input type="hidden" name="form-name" value="contact" />
<button on:submit|preventDefault={submitForm} type="submit">Reach out</button>
</form>
就这样,表单在提交时被发送到 netlify,但它是空的。因此,以文档中的示例为例,我尝试创建自己的 fetch post request
let submitForm =(event)=>{
let formdata = new FormData();
formdata.append('name',$user.name);
formdata.append('email',$user.email);
formdata.append('telephone',$user.telephone);
fetch("/contact/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: formdata,
})
.then(() => alert("Success!"))
.catch(error => alert(error));
event.preventDefault();
}
同样,在我的路由中,我添加了带有导出 POST 函数的 js 文件。
export async function post(req, res, next) {
/* Initializes */
res.setHeader('Content-Type', 'application/json')
/* Retrieves the data */
var data = req.body
/* Returns the result */
return res.end(JSON.stringify(data))
}
无论我做什么,我总是在尝试提交表单时立即收到 404。我在获取中尝试了不同的 URL,我尝试在 js 文件中执行实际的 post,但没有任何效果。 sapper 网上好像没有其他人有这个问题,求助!谢谢!
为此您应该注意以下几点:
Polka(假设您使用的是 Polka)默认情况下不解析输入数据。您需要使用
body-parser
或等效包来解析输入正文。您可以使用提供的示例 here 作为基础,将json()
函数替换为urlencoded()
函数。fetch()
函数将包含POST
函数的路由文件的名称作为第一个参数。如果它存储在contact.json.js
中,则等效调用将是fetch('contact.json', opts)
。 Sapper 惯例是将所有服务器路由存储为*.json.js
文件。
问题是值没有用引号引起来。我只是使用 es6 backdash 语法转换它们并且它有效!
formdata.append('name',`${user.name}`);
formdata.append('email',`${user.email}`);
formdata.append('telephone',`${user.telephone}`);