如何使用axios发布查询参数？答案

【问题标题】：How to post query parameters with Axios?如何使用axios发布查询参数？
【发布时间】：2019-04-29 06:47:31
【问题描述】：

我正在尝试使用一些查询参数在 API 上发布。当我尝试通过邮件和名字作为查询参数传递时，这适用于 PostMan / Insomnia：

 http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName

但是，当我尝试使用我的 react 本机应用程序执行此操作时，出现 400 错误（无效的查询参数）。

这是post方法：

.post(`/mails/users/sendVerificationMail`, {
  mail,
  firstname
})
.then(response => response.status)
.catch(err => console.warn(err));

（我的邮件和名字是 console.logged 如下：lol@lol.com 和 myFirstName）。

所以我不知道如何在我的请求中使用 Axios 传递查询参数（因为现在它正在传递 data: { mail: "lol@lol.com", firstname: "myFirstName" }。

【问题讨论】：

标签： javascript mysql post axios

【解决方案1】：

帖子的axios签名是axios.post(url[, data[, config]])。所以你想在第三个参数中发送 params 对象：

.post(`/mails/users/sendVerificationMail`, null, { params: {
  mail,
  firstname
}})
.then(response => response.status)
.catch(err => console.warn(err));

这将发布一个带有两个查询参数的空正文：

发布 http://localhost:8000/api/mails/users/sendVerificationMail?mail=lol%40lol.com&firstname=myFirstName

【讨论】：

如何发送带有参数的请求和带有 axios 的正文？
@khodekazemi .post(/mails/users/sendVerificationMail, body, { params: { mail, firstname }}) .then(response => response.status) .catch(err => console.warn(err ));

【解决方案2】：

从 2021 年开始，我必须添加 {} 才能使其工作！

axios.post(
        url,
        {},
        {
          params: {
            key,
            checksum
          }
        }
      )
      .then(response => {
        return success(response);
      })
      .catch(error => {
        return fail(error);
      });

【讨论】：

【解决方案3】：

在我的例子中，API 响应了一个 CORS 错误。我改为将查询参数格式化为查询字符串。它成功发布了数据，也避免了 CORS 问题。

        var data = {};

        const params = new URLSearchParams({
          contact: this.ContactPerson,
          phoneNumber: this.PhoneNumber,
          email: this.Email
        }).toString();

        const url =
          "https://test.com/api/UpdateProfile?" +
          params;

        axios
          .post(url, data, {
            headers: {
              aaid: this.ID,
              token: this.Token
            }
          })
          .then(res => {
            this.Info = JSON.parse(res.data);
          })
          .catch(err => {
            console.log(err);
          });

【讨论】：