从页面发布的 sveltekit 端点错误

Question

我过去使用过 sapper，并且多次使用过端点。因此，当我尝试尝试 sveltekit 时，我没想到会在发布到端点时遇到错误。我的设置很简单，我使用 kit.svelte.dev 文档中的步骤搭建了一个框架项目。在我的 index.svelte 中，我添加了一个表单：

<form on:submit|preventDefault={submitit}>
    <p>
    <label>Name :
        <input type="text"  placeholder="name"   aria-label="name" required bind:value={name}>
    </label>
</p>
<p>
    <label>Password :
        <input type="password" placeholder="password"   aria-label="password" required  bind:value={password}>
    </label>
</p>
    <button type="submit">Submit</button>
</form>

在 src 文件夹中，添加 formdata.js 作为端点并添加以下代码：

export function post  (request) {
    let formfields = JSON.parse(request.body)
    
    console.log("login.js name :", formfields.name)
    console.log("login.js password", formfields.password)

    return {
        status : 200,
        headers: {        
            'content-type': 'application/json'
        },
        body : {
            message : "login form submitted the login credentials",
            name : formfields.name,
            password : formfields.password,

        }
    }

} //end post handle

回到我的 index.svelte 文件，我添加了 submitit fn ：

<script>
    let name
    let password

    async function submitit(){
        console.log("name is :", name)
        console.log("password is :", password)
       
        let res = await fetch( 'formdata' ,{
        method : "post",
        headers: {        
        'content-type': 'application/json'
        },
        body : JSON.stringify({
            name : "name",
            password : "password"
        })        
    })// fetch
    let results = res.json()
        return {
            status : results.code,
            body : results
        }

    } //submitit
</script>

当我在表单字段中输入任何内容并点击提交时，我会收到以下错误日志：

"To access the request body use the text/json/arrayBuffer/formData methods, e.g. `body = await request.json()`. See https://github.com/sveltejs/kit/pull/3384 for details
at Object.get (file:///D:/mycode/2022/sveltekit/kittest/skeleton/.svelte-kit/runtime/server/index.js:2244:10)
    at post (D:\mycode\2022\sveltekit\kittest\skeleton\src\routes\formdata.js:4:41)"

我将异步添加到我的端点，没有帮助。

很明显，我的端点出了点问题，或者可能需要更新一些东西。错误是说明请求正文，但不清楚它是我的页面 -index.svelte- 还是我的端点 -formdata.js - 所以任何帮助都会受到赞赏。

---

更新： 当我将端点更改为

let results = await request.json()

我在控制台中得到了这个：

request.json is not a function
TypeError: request.json is not a function
    at post (D:\mycode\2022\sveltekit\kittest\skeleton\src\routes\formdata.js:2:36)
    at render_endpoint (file:///D:/mycode/2022/sveltekit/kittest/skeleton/.svelte-kit/runtime/server/index.js:117:25)
    at async resolve (file:///D:/mycode/2022/sveltekit/kittest/skeleton/.svelte-kit/runtime/server/index.js:2299:10)
    at async respond (file:///D:/mycode/2022/sveltekit/kittest/skeleton/.svelte-kit/runtime/server/index.js:2264:20)
    at async file:///D:/mycode/2022/sveltekit/kittest/skeleton/node_modules/@sveltejs/kit/dist/chunks/index.js:238:24
Line must be greater than or equal to 1, got 0
TypeError: Line must be greater than or equal to 1, got 0
    at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:58887:13)
    at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:58956:22)
    at D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:59897:34
    at String.replace (<anonymous>)
    at D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:59885:21
    at Array.map (<anonymous>)
    at ssrRewriteStacktrace (D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:59884:10)
    at Object.ssrFixStacktrace (D:\mycode\2022\sveltekit\kittest\skeleton\node_modules\vite\dist\node\chunks\dep-f5552faa.js:60382:36)
    at Object.get_stack (file:///D:/mycode/2022/sveltekit/kittest/skeleton/node_modules/@sveltejs/kit/dist/chunks/index.js:244:14)
    at render_response (file:///D:/mycode/2022/sveltekit/kittest/skeleton/.svelte-kit/runtime/server/index.js:1085:25)

我在文档中找到了这个，但我不知道它是什么意思或如何实现它： 您不能直接要求 JSON 文件，因为 SvelteKit 期望 svelte.config.js 是一个 ES 模块。如果您想在应用程序中包含应用程序的版本号或 package.json 中的其他信息，您可以像这样加载 JSON：

Answer 1

错误在控制台，说明在服务器端。

问题在于 request.body 与 Node 中的不同。请求/响应项实际上来自 Fetch API。

尝试改变

let formfields = JSON.parse(request.body)

到

let formfields = await request.json()

同样，在前端 res.json() 返回一个 Promise。

尝试等待它：

let results = await res.json();