get请求无法解析特殊字符的问题

2025-09-05 约 753 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=151216545

get请求无法解析特殊字符的问题

使用的axios，vue环境，发现参数带有特殊字符的时候，接口报错，这是因为无法解释的原因，比如带有[]/&.等等，身为前端我们应该怎么做呢？

最直接有效的是让后端把接口get方式改成post请求，在body体内，便不会出现这样的问题。（当然后端是后端愿意的情况下）
使用get的params，但是这个也不能保证一定不出错，因为博主就是发现参数带有[这样的字符]报错了
手动解析get参数

正常写法

import request from '@/utils/request';//全局请求拦截器

export function getMetaCatalog(params) {//汇交目录
    return request({
        url: '/metadata/basin/getMetaCatalog',
        method: 'get',
        params: params
    })

}

改造成这样，发现可以用，很开心，但是，本项目get都是之前的写法，并且接口很多了，如果都去改成这样需要大量时间和人力成本，而且很麻烦，我就不想每个接口都去改造一遍，于是，就可以如4这样做

export function getMetaCatalog(params) {//汇交目录
    const searchParams = new URLSearchParams(); 
    Object.entries(params).forEach(([key, value]) => {
        if (value !== null && value !== undefined) {
            searchParams.append(key, value);
        }
    });
    return request({
        url: `/apply/basin/getMetaApply?${searchParams.toString()}`,
        method: 'get',
    });
}

在请求拦截器统一改造，既不用动源代码又能保证每个使用此文件的都可以改造到

request.js 根据自己的文件来

import axios from 'axios'
// 创建axios实例
const service = axios.create({
        // axios中请求配置有baseURL选项，表示请求URL公共部分
        baseURL: process.env.VUE_APP_BASE_API,
        // 超时
        timeout: 1000000,

    })
    //request拦截器
service.interceptors.request.use(config => {
    if (config.method === 'get' && config.params) {//判断params因为本博主之前是params传参，params是一个对象，所以有键值对
        const searchParams = new URLSearchParams();
        Object.entries(config.params).forEach(([key, value]) => {
          if (value !== null && value !== undefined) {
            searchParams.append(key, value);
          }
        });

        const queryString = searchParams.toString();
        if (queryString) {
          config.url += (config.url.includes('?') ? '&' : '?') + queryString;
        }
        // 清除原来的 params，避免重复
        config.params = {};
      }
   //其他逻辑按照自己的来
    return config
}, error => {
        Promise.reject(error)


})

// 响应拦截器
service.interceptors.response.use(res => {
      //自己的逻辑，跟请求拦截器无关
 })

export default service

如果是新写的项目，不妨参照我现在的写法，之前已经有自己的传参形式，可以看看怎么改造比较方便