如何解决前端get请求中相同参数名导致的问题？

本文共计378个文字，预计阅读时间需要2分钟。

请求展示 GET 传输参数要求 customer-user/select-representatives/actionId?profileIds=xxx&profileIds=xxx&profileIds=xxx。如果选择拼接字符串，浏览器只会解析到第一个参数，因为参数名相同，导致无法正确解析。

需求展示

GET 传参要求

customer-user/select-representatives/actionId?profileIds=xxx?profileIds=xxx?profileIds=xxx

如果选择拼接字符串，浏览器只会解析到到第一个参数，后面因为同名无法解析。

网上查到的方法都是说，把一样的参数名变成一个数组像下面这样：

let profileIds = ['xxxx','xxxx']

但是解析后又变成:

profileIds[]=xxx&profileIds[]=xxx

所以还是得想办法解决啊。。。

解决方法

1.首先我们要安装 qs，可以百度去了解下这个包，主要是做 url 序列化的转译和编译的。npm安装的qs模块

npm insatall qa -s

2.配置axios参数序列化，把中括号等特殊字符序列化

// create an axios instance const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url timeout: 100000, // request timeout // 配置axios参数序列化,把中括号等特殊字符序列化 paramsSerializer: (params) => qs.stringify(params, { indices: false }), })

3.然后将上面参数变成数组后传入就行

参考文章

js axious 前端 请求多个相同参数名传值
get请求的参数包含中括号[]时，报错400