解决：axios 请求头url传参数组时发生400错误

一、媒介

• axios封装的网络请求，url传参时，数组作为参数通报，发生400错误
  
• 请求时数组参数转url会保存 []
  

二、缘故原由

   RFC3986：除了 数字 + 字母 + -_.~ 不会被转义，其他字符都会被以百分号（%）后跟两位十六进制数 %{hex} 的方式进行转义
  

• url 编码标准 RFC3986 是保存方括号的
  
• 可能 axios 非最新版本也是一个缘故原由，当前使用的"axios": "^1.7.2"，听说最新版本是已经转换方括号了，没有试过…
  

三、解决方案

• 一般 axios 自带 qs 模块，使用 qs 的 paramsSerializer 方法序列化 params。
  
• 参考axios请求配置文档：https://www.axios-http.cn/docs/req_config
  

1. // 解决数组url传参时参数带'[]'问题
2. paramsSerializer: function (params) {
3.     return qs.stringify(params, { arrayFormat: "repeat" });
4. },

复制代码

• 相关代码如下：
  
  
  
  • 封装的axios文件request.js
    
    1. /**
    2. *
    3. * Author: ***
    4. * Date: 2024-09-04
    5. *
    6. * Description: axios接口封装
    7. *
    8. */
    10. import axios from "axios";
    11. import { Message } from "element-ui";
    13. // create an axios instance  创建 axios 实例
    14. const service = axios.create({
    15.   baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    16.   timeout: 20000, // request timeout
    17.   headers: {
    18.     "Content-Type": "application/json;charset=UTF-8",
    19.     "x-requested-with": "XMLHttpRequest",
    20.   },
    21. });
    23. let globalVarMsg = null; // 全局变量Msg，用于控制Message只弹出一次
    25. /**
    26. * request interceptor 请求拦截
    27. */
    28. service.interceptors.request.use(
    29.   (config) => {
    30.     return config;
    31.   },
    32.   (error) => {
    33.     // do something with request error
    34.     return Promise.reject(error);
    35.   }
    36. );
    37. /**
    38. * response interceptor 响应拦截
    39. */
    40. service.interceptors.response.use(
    41.   (response) => {
    42.     const status = response.status;
    43.     const res = response.data;
    44.     // if the custom code is not 20000, it is judged as an error.
    45.     if (!res.success && response.config.headers.popUps !== false) {
    46.       if (!globalVarMsg) {
    47.         globalVarMsg = true;
    48.         Message({
    49.           message:
    50.             status != 200 ? "系统开小差，请稍后再试" : res.msg || "未知错误",
    51.           type: "error",
    52.           duration: 5 * 1000,
    53.           onClose: () => {
    54.             globalVarMsg = null;
    55.           },
    56.         });
    57.       }
    58.     }
    59.     return res;
    60.   },
    61.   (error) => {
    62.     const msg = error.response?.data?.message || "";
    63.     if (!globalVarMsg) {
    64.       globalVarMsg = true;
    65.       Message({
    66.         message: msg || error.message || "系统开小差，请稍后再试",
    67.         type: "error",
    68.         duration: 5 * 1000,
    69.         onClose: () => {
    70.           globalVarMsg = null;
    71.         },
    72.       });
    73.     }
    74.     return Promise.reject(error);
    75.   }
    76. );
    78. export default service;

    复制代码
  • 接口文件 manage.js
    
    1. /**
    2. *   接口-管理
    3. */
    4. import request from "@/utils/request";       // 上面封装的request.js文件
    5. const qs = require("qs");                    // 一般 axios 自带 qs 模块
    7. const api = {
    8.   delEvents: "/rest/event/batch/delete",
    9. };
    11. /**
    12. * 批量删除事件
    13. */
    14. export function delEvents(params) {
    15.   return request({
    16.     url: api.delEvents,
    17.     method: "delete",
    18.     params: params,
    19.     // 解决数组url传参时参数带'[]'问题
    20.     paramsSerializer: function (params) {
    21.       return qs.stringify(params, { arrayFormat: "repeat" });
    22.     },
    23.   });
    24. }

    复制代码
  
  

四、qs 的常用 arrayFormat 参数

   qs地址：https://github.com/ljharb/qs
  qs镜像中文地址：https://gitcode.com/gh_mirrors/qs/qs/overview?utm_source=csdn_github_accelerator&isLogin=1

1. qs.stringify({ a: ['b', 'c', 'd'] });  
3. // 数组字符串化遵循 arrayFormat 选项，默认为 indices：
4. // 结果为 'a[0]=b&a[1]=c&a[2]=d'

复制代码

1. qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });
3. // 结果为 'a=b&a=c&a=d'

复制代码

1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
3. // 结果为 'a[0]=b&a[1]=c'

复制代码

1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
3. // 结果为 'a[]=b&a[]=c'

复制代码

1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
3. // 结果为 'a=b&a=c'

复制代码

1. qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
3. // 结果为 'a=b,c'

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。