在获取调用中将" "替换为 %20

Question

我知道关于如何将" "(空格(替换为%20的问题已经在SO上提出过，但我需要知道我可以在哪里实现它 - 我正在使用React Native作为我的前端，NodeJS(ExpressJS(作为连接到PostgreSQL数据库的后端。

是否可以使用bodyparser urlencoded来实现此目的？我只需要在 1 或 2 个查询中使用它，而不是全部。

我的前端部分：(在组件DidMount上调用它(

getData("username")
.then(data => data)
.then(value => {
this.setState({username: value})
fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${value}'`)    // replace " " mit %20 ?!?!?! 
.then(res => res.json())
.then(result => {
console.log("** UuNamMe **" + this.state.username)
console.log("Res from  UnlockTabelle : " + result)
console.log("Res from  UnlockTabelle[0] : " + result[0])
})
.catch(err => console.log("ErrorLog: @unlock : " + err))
})
.catch(err => console.log(err))

我的后端部分：

static unlockUser(username, callback) {
db.query(`SELECT * FROM unlock WHERE name = '${username}'`, (err, res) => {
if (err.error) {
callback(err);
}
callback(res);
});
}
static lockUser(username, callback) {
db.query(`DELETE FROM unlock WHERE name = '${username}'`, (err, res) => {
if (err.error) {
callback(err);
}
callback(res);
});
} 

---

router.get("/unlock/:username", (req,res) => {
const username = req.params.username
Hours.unlockUser(username, (err, result) => {
if(err) {
return res.json(err)
}
return res.json(result)
})
})
router.delete("/lock/:username" , (req, res) => {
const username = req.params.username
Hours.lockUser(username, (err, result) => {
if(err) {
return res.json(err)
}
return res.json(result)
})
})

如果我想对 URL 进行编码以将" "替换为 %20，这将在哪里发生？在我的后端使用bodyparser或在我的前端，如果是这样，那会是什么样子？

Answer 1

您可以使用encodeURIComponent在前端执行此操作：

fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${encodeURIComponent(value)}'`)

Answer 2

或者，您可以将相关headers添加到fetch语句中，如下所示：

fetch(`http://xxx.xxx.xx.xx:6969/api/hours/unlock/'${value}'`, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})

希望这有帮助！

Answer 3

好的，我刚刚注意到如果我从'${value}'中删除' '，它实际上可以工作 - 检查空格并替换它们是否更好，因为这似乎以某种方式自动发生。