如何将两个参数传递给 Javascript/NodeJS 中的 API“获取”请求答案

【问题标题】：How to pass two parameters to an API 'Get' Request in Javascript/NodeJS如何将两个参数传递给 Javascript/NodeJS 中的 API“获取”请求
【发布时间】：2021-10-11 06:17:41
【问题描述】：

我有一个 React 组件，它必须使用两个参数对 MongoDB 数据库执行 find({}) 查询。

const likes = await Likes.find({ postId: postId, userId: userId }).exec()

由于 Mongo 代码只能在服务器上运行，我必须进行 API 调用（我正在使用 NextJS）。这个 API 调用显然是一个 GET 请求。如何使用 SWR（或 fetch）将 'postId' 和 'userId' 传递给 get 请求？

我试图通过“身体”将它们作为对象传递，但我认为这根本不是正确的方法。

const likesPerUser = {
    postId: postId,
    userId: userId
}

const docs = await fetch('/api/likes/user', {
    method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
    body: JSON.stringify(likesPerUser),
})

我无权访问 URL 查询字符串

我有一种感觉，我可能在这里不太重要。任何帮助将不胜感激。干杯，马特

【问题讨论】：

通常情况下，不会将正文与 GET 请求一起使用。您是否可以修改服务器端，并将 GET 更改为 POST？
是的，当然，但我对 API 调用比较陌生，我认为 POST 请求仅用于创建或更新帖子？
同意，从语义上讲，POST 请求用于创建。但是许多设备/框架/架构不支持 GET 请求中的主体。因此，在使用正文时使用 POST 请求是安全的。如果必须使用 GET 请求，建议使用查询参数。
@VedantBang：将 GET 更改为 POST 只是为了让使用 body 感觉更好，这不是正确的方法......无论如何，让您的 GET 请求与 body 一起发送并没有真正的伤害
@MattHeslington：你为什么说你无权访问查询字符串？如果您将数据作为查询字符串传递，则可以访问它

标签： node.js mongodb next.js swr

【解决方案1】：

使用查询参数的解决方案

您可以在 GET 请求 URL 中将参数作为 query params 传递。

这是具有多个查询参数的 URL 的格式：

http://localhost:8000/api/likes/user?postId=xyz&userId=123

在这里，您可以看到? 符号，表示查询参数已启动。而且，您还会注意到 & 用于分隔多个查询参数。这样，您可以发送任意数量的查询参数。

注意：所有查询参数均为string。您的 URL 中的查询参数大小可以最多 1024 个字符。

以下是从node.js backend接收查询参数的示例代码：

exports.sampleFunction = async (req, res) => {
    const postId = req.query.postId
    const userId = req.query.userId

    // write your code here
}

以下是使用fetch从front-end发送查询参数的示例代码：

const docs = await fetch(`/api/likes/user?postId=${postId}&userId=${userId}`, {
    method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        }
})

【讨论】：

"在 GET 请求中发送 body/payload 可能会导致一些现有实现拒绝请求——虽然规范没有禁止，但语义未定义。最好避免在 GET 请求中发送有效负载。” developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET，说“GET 方法没有主体”，而语义未定义可能有点令人困惑。请记住，这些只是规范（！），GET 请求可以有一个主体，只是不打算（！）有一个。
是的，你是对的。但是，相同的文档也提到 Request 有 body ---- No。这就是为什么我写了 GET 方法没有主体，所以我们只能专注于一种策略。而且，如果我们发送带有 GET 请求的正文，则 fetch API 也会通过异常。是的，有时它会与文档混淆！
我完全明白你的意思，但是说“所以，你不能通过调用 GET 请求来传递正文。”只是错误的，因为这不是如何工作的，与标题相同。当然，MDN 在描述规范时会写“Request has body ---- No”，如果您不遵守这些规范，那么根据规范构建的浏览器控制台会抛出错误。但问题是，规范是并且将永远只是规范，尝试在 Postman 中运行带有正文请求的 GET，它工作正常，因为它不关心规范，与标头一样。跨度>
是的，我明白了。所以，我刚刚更新了我的答案！你现在可以看看。
谢谢你，我不是想把你或类似的东西合二为一，但我们必须小心选择含有这些东西的词，尤其是规格。如果人们构建软件并将规范视为一项功能而不是指导方针，那么他们的软件中可能存在严重的安全漏洞。

【解决方案2】：

let options = {
method: 'GET',
headers: {accept: 'application/json', 'content-type': 'application/json'},
body: JSON.stringify({
    your data parameters 
}), };

fetch('url link', options)
.then(response => response.json();)
.then(response_json => {
    console.log(response_json);
})

或者也像这样在你的 url 中设置查询参数。 http://localhost:8000/test_data?postId=xyz&userId=123

【讨论】：

感谢 Kiran，您处理回复的方式对我帮助很大