Vue 3 中请求拦截器怎么处理特殊字符的 URL 编码转义-Vue.js-PHP中文网

vue 3请求拦截器不负责url编码，仅统一处理编码逻辑：get参数需用qs库序列化，post/put按content-type适配序列化方式，手动拼url时只编码参数值，禁用全局encodeuri。

vue 3 中请求拦截器怎么处理特殊字符的 url 编码转义

Vue 3 中请求拦截器本身不负责 URL 编码转义，它只做“转发前的加工”。真正决定是否需要编码、怎么编码的，是请求类型（GET/POST）、参数位置（URL 查询串 or 请求体）以及后端约定的 Content-Type。拦截器的作用，是在 Axios 发送前统一处理这些逻辑，避免每个接口手动写 encodeURIComponent。

GET 请求的 params 必须确保 URL 安全

GET 参数拼在 URL 后，浏览器遇到 #、空格、中文、&、= 等会截断或解析错。比如 /api/list?name=张三&tag=a#b，#b 会被当成锚点丢弃。

Axios 默认对 params 做基础编码（类似 encodeURIComponent），但仅限扁平对象，不支持嵌套或数组展开
若 params 是复杂结构（如 { filter: { status: [1,2], tags: ['a','b'] } }），默认会变成 ?filter=[object%20Object] —— 无效
推荐引入 qs 库：npm install qs，然后在请求拦截器中统一配置：

service.interceptors.request.use(config => {
  if (config.method === 'get' && config.params) {
    config.paramsSerializer = params => qs.stringify(params, { arrayFormat: 'brackets' });
  }
  return config;
});

POST/PUT 的 data 编码方式由 Content-Type 决定

拦截器需根据后端要求，自动适配序列化方式，不能一概而用 JSON.stringify。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

发 JSON（Content-Type: application/json）：data 直接传对象，Axios 自动调用 JSON.stringify，中文、引号、斜杠等都合规，无需额外编码
发表单（Content-Type: application/x-www-form-urlencoded）：data 必须是字符串或 URLSearchParams 实例；若传对象，拦截器中应转换：

if (config.headers['Content-Type'] === 'application/x-www-form-urlencoded' && typeof config.data === 'object') {
config.data = new URLSearchParams(config.data).toString();
}

发 FormData（含文件）：Content-Type 由浏览器自动设为 multipart/form-data，data 用 new FormData()，append 字段即可，完全不用编码

手动拼接 URL 时，只对参数值单独编码

有些场景（如动态跳转、构造导出链接）需在拦截器外拼 URL，这时极易出错：不能对整个 URL 调用 encodeURIComponent（会把 /、:、? 全部破坏），只能对参数值编码。

错误写法：const url = encodeURIComponent('/api/export?name=' + name) → 整个路径被毁
正确写法：const url = '/api/export?name=' + encodeURIComponent(name)
更健壮的做法：用 URLSearchParams 构造查询串，再拼入 URL：

const searchParams = new URLSearchParams();
searchParams.set('name', name);
searchParams.set('type', type);
const url = '/api/export?' + searchParams.toString();