Svelte/Sapper:开机自检时body是空的

Question

我正试图使用sapper创建一个登录表单，但在尝试测试基本的POST获取时遇到了以下问题。

在routes/login/login.svelte中，我有以下代码，点击按钮即可调用：

<script>
let data = {"email":"test"};
const handleLogin = async () => {
const response = await fetch("/login/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: data
});
};
</script>

哪个应该将data中的内容发送到具有以下代码的routes/login/login.js：

export async function post(req, res, next) {
res.setHeader('Content-Type', 'application/json');
var data = req.body;
return res.end(JSON.stringify(data));
}

我的问题是，这只返回{}，而不是在svelte页面中发送的数据。关于为什么会发生这种事，以及我哪里出了问题，有什么想法吗？谢谢

Answer 1

发送数据时，还应将其字符串化为

body: JSON.stringify(data)

作为一个额外的功能，请确保在服务器中安装并添加了body解析器作为中间件，这个包将帮助您处理在其主体中发送json数据的请求。

polka() // You can also use Express
.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
bodyparser(),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});

Answer 2

在前面的回答的基础上，我在这里编写了完整的工作解决方案。您的问题可能是由于：

1. 不使用json解析中间件
2. 不将fetch视为承诺

以下是我的修复方法：

1. npm i body-parser
2. 在server.js中添加json中间件

const { json } = require('body-parser');
polka()
.use(
compression({ threshold: 0 }),
json(),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});

3. 将fetch响应视为Promise。Svelte组件应该是这样的(注意链接的then(：

<script>
let data = {"email":"test"};
const handleLogin = async () => {
await fetch(`your-endpoint`, {
method: 'POST',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(res => console.log(res)); // {email: "test"}
};
</script>