【问题标题】:svelte/sapper - 404 on any fetch request outside of the serversvelte/sapper - 在服务器外部的任何 fetch 请求上都是 404
【发布时间】:2021-02-22 10:29:56
【问题描述】:

使用 sapper 模板,我在 netlify 上部署了我的应用程序。我想将netlify表单与sapper集成,所以我使用了docs表单结构。

<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,但它是空的。因此,以文档中的示例为例,我尝试创建自己的获取发布请求

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。我在 fetch 中尝试了不同的 URL,我尝试在 js 文件中进行实际发布,什么都没有。互联网上似乎没有其他人在 sapper 上遇到此问题,请帮助!谢谢!

【问题讨论】:

    标签: forms http svelte netlify sapper


    【解决方案1】:

    问题是这些值没有用引号括起来。我只是使用 es6 反划线语法投射它们,它工作了!

    formdata.append('name',`${user.name}`);
    formdata.append('email',`${user.email}`);
    formdata.append('telephone',`${user.telephone}`);
    

    【讨论】:

      【解决方案2】:

      您应该注意以下几点:

      1. Polka(假设您使用的是 Polka)默认情况下不解析输入数据。您需要使用body-parser 或等效包来解析输入正文。您可以使用here 提供的示例作为基础,将json() 函数替换为urlencoded() 函数。

      2. fetch() 函数将包含 POST 函数的路由文件的名称作为其第一个参数。如果它存储在contact.json.js 中,则等效调用将是fetch('contact.json', opts)。 Sapper 约定是将所有服务器路由存储为*.json.js 文件。

      【讨论】:

      • 所有非常有用的信息,我先检查了所有这些东西,但仍然遇到问题。不过感谢您的尝试!
      猜你喜欢
      • 2021-05-21
      • 2021-05-18
      • 2020-06-06
      • 2021-05-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-01
      • 2021-01-11
      相关资源
      最近更新 更多