通过 Axios 发送 urlencoded 数据时，第二次登录时出现重复参数

Question

我正在进行基于令牌的身份验证，我必须通过 axios 发送 urlencoded 数据。用户和密码传给了axios函数，我按照文档传了所有的参数。

import axios from 'axios'

const params = new URLSearchParams()
params.append('client_id', 'xyz-client')
params.append('secret', 'xyz')
params.append('scope', 'xyz')
params.append('grant_type', 'password')

const config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Basic zyx=',
    },
}

export default {
    authUser(userData) {
        params.append('username', userData.email)
        params.append('password', userData.password)
        return axios.post(
            'myhttpAPI',
            params,
            config
        )
    },
}

用户首次登录时一切正常，但如果我注销应用程序然后再次尝试登录，post 请求将失败。我意识到在第二次登录请求中，由于某种原因，axios 调用复制了 authUser 函数中添加的参数，因此在第一次登录时，有效负载是这样的：

client_id: xyz
secret: xyz
scope: xyz
grant_type: password
username: xyz
password: xyz

如果我注销然后尝试再次登录（不重新加载页面），有效负载是这样的：

client_id: xyz
secret: xyz
scope: xyz
grant_type: password
username: xyz
password: xyz
username: xyz
password: xyz

如您所见，用户名和密码参数重复，所以 API 给我这个错误：

{"error":"invalid_request","error_description":"Could not find agent with username bond@test.com,bond@test.com"}

因为 axios 请求复制了那些参数。我真的不知道这是后端错误还是 axios post 格式不正确。我还意识到，如果我重新加载页面，一切正常，所以问题是我在不重新加载页面的情况下尝试再次登录。

Answer 1

根据 MDN，如果您使用 'set'，它将替换任何现有的同名值。这应该可以解决您的问题，因为您似乎正在附加附加值。

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/set

通过 Axios 发送 urlencoded 数据时，第二次登录时出现重复参数

Duplicated params on second login when sending urlencoded data via Axios

xmlhttprequest

vue.js

axios

x-www-form-urlencoded