Vue3 + Axios.post -- 数据序列化不正确

Question

Objective：将 {"username": myuser, "password": mypswd} 发送到 API 端点，这样我就可以获得一个令牌，以便与 API 进一步交互。

代码：

// Variation # 1
let res = await axios.post(
    url, {
      "username": args.username,
      "password": args.password
    }).then(res => { console.log(res) })

// Variation # 2
var params = new FormData()  // required npm install form-data
params.append("username", args.username)
params.append("password", args.password)
let res = await axios.post(
    url, params
    }).then(res => { console.log(res) })
    
// Variation # 2a
var params = new FormData()  // required npm install form-data
params.append("username", args.username)
params.append("password", args.password)
let res = await axios.post(
    url, params, {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }
    }).then(res => { console.log(res) })

// Variation # 3
var params = new URLSearchParams()  
params.append("username", args.username)
params.append("password", args.password)
let res = await axios.post(
    url, params
    }).then(res => { console.log(res) })

以上所有似乎都错误地传递了 post 数据。使用 Wireshark，当我检查请求时，当我检查请求数据包时传递的数据是 [object Object]。

如果我运行对 PostMan 中的那个 API 端点进行相同的调用并检查数据包，我会看到以下内容：

Content-Type: multipart/form-data; 
boundary=--------------------------074168144775996161656376
Content-Length: 293
----------------------------074168144775996161656376
Content-Disposition: form-data; name="username"
any.user.name
----------------------------074168144775996161656376
Content-Disposition: form-data; name="password"
MyPassword

当然，PostMan 会给出预期的标记作为响应。

谁能找出 any/all 这些变体的编码失败的原因？ #1 是 axios.post documentation 的建议。其他是我在本网站和其他地方找到的各种建议的补救措施。这似乎只是在我尝试将我的代码升级到 Vue3 时才出现。我的 Vue2 代码正在使用 #2 (FormData)。

Answer 1

没有理由使用Axios。这应该有效：

const args = {
  "username": "someusername",
  "password": "somepassword"
}
const data = {
  "username": args.username,
  "password": args.password
}
const url = "https://google.com"
fetch(url, {
  method: "POST",
  body: JSON.stringify(data)
})

Vue3 + Axios.post -- 数据序列化不正确

Vue3 + Axios.post -- data incorrectly serialized

javascript

vue.js

axios