vue 3 中 axios 不支持自定义传输协议，所谓“特殊加密请求”实为在 https 基础上对请求内容或请求头进行前置加密，核心是通过请求/响应拦截器实现数据加解密，而非改造协议栈。
Vue 3 中 Axios 本身不提供“自定义传输协议”能力——它底层仍基于浏览器的 fetch 或 XMLHttpRequest，无法替换 HTTP/HTTPS 协议栈。所谓“特殊加密请求”，实际是指在标准 HTTPS 基础上，对**请求内容（如参数、body）或请求头**做前置加密处理，而非改造传输层协议。
核心思路：用拦截器实现逻辑层加密
所有加密动作都应在 Axios 请求拦截器中完成，确保数据发出前已加密、响应返回后可解密。关键不是换协议，而是控制数据进出环节：
- 请求拦截器中：对
config.data（POST/PUT）或config.params（GET）进行加密，再拼入请求 - 响应拦截器中：对
response.data执行对应解密，还原业务数据 - 加密密钥建议从服务端动态获取或结合用户会话生成，避免硬编码
常见加密方式与配置示例
根据安全等级和后端约定，可选不同策略：
-
MD5 签名（防篡改+防重放）：不加密正文，但对参数+时间戳+密钥拼接后 MD5，作为
sign头发送。适合轻量级接口校验 - AES 对称加密（防泄露）：用 CryptoJS 或 Web Crypto API 对整个请求 body 加密，后端用相同密钥解密。需统一 IV、模式（如 CBC）、填充方式
-
国密 SM4（合规要求场景）：军工、政务类项目常用，需引入支持 SM4 的库（如
sm-crypto），在拦截器中调用sm4.encrypt()
配置加密 Axios 实例的实操步骤
以 AES 加密 POST 请求为例（假设使用 crypto-js）：
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 安装依赖：
npm install crypto-js - 创建
src/utils/request.js，导出封装后的实例：
import axios from 'axios';
import CryptoJS from 'crypto-js';
const service = axios.create({
baseURL: '/api',
timeout: 10000
});
service.interceptors.request.use(config => {
if (config.method === 'post' && config.data) {
const key = CryptoJS.enc.Utf8.parse('16-byte-secret-key'); // 实际应动态获取
const iv = CryptoJS.enc.Utf8.parse('16-byte-iv-value');
const encrypted = CryptoJS.AES.encrypt(JSON.stringify(config.data), key, {
iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
config.data = { ciphertext: encrypted.toString() }; // 发送密文字段
}
return config;
});
service.interceptors.response.use(response => {
if (response.data?.ciphertext) {
const key = CryptoJS.enc.Utf8.parse('16-byte-secret-key');
const iv = CryptoJS.enc.Utf8.parse('16-byte-iv-value');
const decrypted = CryptoJS.AES.decrypt(response.data.ciphertext, key, { iv });
response.data = JSON.parse(decrypted.toString(CryptoJS.enc.Utf8));
}
return response;
});
export default service;
组件中直接使用：await service.post('/login', { username, password })，全程无感知加密解密。
必须配合的基础保障
再强的前端加密也需后端协同和基础设施支撑：
- 强制 HTTPS：否则加密意义不大，明文流量仍可能被中间人劫持
- 密钥不硬编码：避免打包进前端代码，建议登录后由后端下发短期有效密钥
- 时间戳校验：在签名或加密中加入当前毫秒时间，并在后端验证有效期（如±5分钟）
- 避免敏感操作仅靠前端加密：密码等关键字段仍需后端再次哈希存储，前端加密只是传输加固
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
