Vue-Vben-Admin项目中GET请求数组参数处理的最佳实践

问题背景

在使用Vue-Vben-Admin项目进行开发时，开发者可能会遇到GET请求中包含数组参数时出现的CORS(跨域资源共享)问题。具体表现为当URL中包含类似createTime[]=2025-03-11这样的数组参数时，浏览器会拦截请求并报错，而普通参数则能正常请求。

问题本质分析

虽然表面上看是CORS错误，但实际上这是由两个独立但相关的问题共同导致的：

1. 参数序列化问题：Axios默认的params序列化方式对数组参数处理不够友好，会生成带有方括号的URL参数格式，如param[]=value1&param[]=value2

2. 服务器兼容性问题：某些服务器(特别是Java后端)对这种带方括号的参数格式处理不够完善，可能会触发预检请求(OPTIONS)，而如果服务器未正确配置CORS响应头，就会导致真正的CORS错误

解决方案

方案一：使用qs库进行参数序列化

1. 首先安装必要的依赖：

pnpm add qs
pnpm add -D @types/qs

2. 在创建请求客户端时配置paramsSerializer：

import qs from 'qs'

export const requestClient = createRequestClient(apiURL, {
  responseReturn: 'data',
  paramsSerializer(params) {
    return qs.stringify(params, { arrayFormat: 'repeat' })
  },
})

qs库提供了多种数组格式化选项：

• repeat: param=value1&param=value2
• comma: param=value1,value2
• brackets: param[]=value1&param[]=value2 (默认)
• indices: param[0]=value1&param[1]=value2

方案二：修改服务器配置

如果问题确实是由CORS引起的，可以在服务器端进行以下配置：

1. 确保正确处理OPTIONS预检请求
2. 在响应头中添加必要的CORS相关头信息：
   • Access-Control-Allow-Origin
   • Access-Control-Allow-Methods
   • Access-Control-Allow-Headers

最佳实践建议

1. 前后端协商参数格式：前后端团队应事先约定数组参数的传递格式，避免后期兼容性问题

2. 统一使用qs处理：即使当前没有数组参数需求，也建议预先配置好qs序列化，以防未来需求变更

3. 考虑封装为项目标准：可以将qs配置封装到项目的请求工具中，作为开发规范的一部分

4. 测试不同格式的兼容性：在项目初期应对各种参数格式进行充分测试，确保前后端交互无问题

总结

在Vue-Vben-Admin项目中处理GET请求的数组参数时，合理使用qs库进行参数序列化是推荐的做法。这不仅能解决潜在的CORS问题，还能使API请求更加规范统一。开发者应根据实际项目需求选择合适的数组格式化方式，并与后端团队保持良好沟通，确保前后端参数处理的一致性。