Vue 3 中 Axios 请求拦截器动态添加时间戳参数，核心是通过 config.params（GET）或 config.data（POST/PUT）注入 Date.now()，支持按需启用、避免覆盖原有参数，并需注意签名一致性与重复添加问题。

在 Vue 3 中使用 Axios 请求拦截器动态添加时间戳参数，核心是利用 config.params 或 config.url 在请求发出前注入当前毫秒级时间戳（如 timestamp=1727220480123），避免缓存、辅助调试或满足后端幂等/时效性校验需求。

一、直接往 URL 参数里加 timestamp

适用于 GET 请求，最简洁通用的方式：

• 在请求拦截器中读取当前时间戳，追加到 config.params 对象中
• 如果请求已带其他参数，params 会自动拼接到 URL 后；若没有，也会生成 ?timestamp=xxx
• 示例代码：

// src/utils/request.js
const service = axios.create({ baseURL: '/api', timeout: 10000 })
service.interceptors.request.use(config => {
  config.params = { ...config.params, timestamp: Date.now() }
  return config
})

二、对 POST/PUT 等请求体加 timestamp 字段

当后端要求 timestamp 放在请求体（如 JSON body）中时，需区分数据类型处理：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• 若 config.headers['Content-Type'] 是 application/json，且 config.data 是对象，则直接扩展字段：config.data.timestamp = Date.now()
• 若 config.data 是字符串（如已序列化），可先 JSON.parse，加字段后再 JSON.stringify（注意异常捕获）
• 不建议无差别修改所有请求体——应配合接口约定或白名单控制

三、按需添加，避免干扰业务逻辑

不是每个请求都需要时间戳。推荐加一层判断逻辑，提升可控性：

立即学习“前端免费学习笔记（深入）”；

• 通过请求 URL 路径匹配（如只对 /order/create 加）
• 通过自定义配置标识，比如在调用 API 时传入 { needTimestamp: true }，然后在拦截器里读 config.needTimestamp
• 示例：

service.interceptors.request.use(config => {
  if (config.needTimestamp !== false) { // 默认加，可显式设为 false 关闭
    config.params = { ...config.params, timestamp: Date.now() }
  }
  return config
})

四、注意点与常见问题

实际使用中容易忽略但关键的细节：

• 不要覆盖原 params/data：始终用展开运算符或深拷贝合并，防止丢失原有参数
• 避免重复添加：如果多个拦截器都操作 params，可能造成 timestamp 出现多次——确保只在一个地方统一处理
• 时间精度够用即可：一般 Date.now() 毫秒级足够；若需更高精度（如微秒），浏览器支持有限，不建议强行追求
• 服务端需忽略该参数做签名或验签：若请求含签名，timestamp 必须参与签名计算，否则校验失败