参考如下：

POST请求中的四种数据类型

1、blog.csdn.net/qq_44113347…

vue 使用AES 加密

1、vue 使用AES 加密 blog.csdn.net/qq_42108937…

2、js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例www.jb51.net/javascript/…

Vue前端渲染blob二进制对象图片的方法

blog.csdn.net/qq_46123200…

我的代码

请求的接口api：这里截图

加密解密的代码：

<script setup>
import { ref, onMounted } from 'vue'
import { qrCode } from '@/api/qrCode'
import CryptoJS from 'crypto-js'
import paramConfig from '@/assets/js/config.js'

// defineProps<{ msg: string }>()

const tenantName = ref('')
const staId = ref('')
const timestamp = ref(null)
const qrCodeUrl = ref('')

function getQrCode() {

  // 获取当前时间戳（单位：毫秒）,  转换为秒数 当前时间至1970-1-1 00:00:00的秒数
  let currentTimeMillis = Date.now(); 
  timestamp.value = Math.floor(currentTimeMillis / 1000);

  // 这两个变量最后需要放到   config.json中去  先写死在这里
  tenantName.value = paramConfig.tenantName
  staId.value = paramConfig.staId

  // 这是 密钥 ase 的二进制 Key 值。  这步最开始把MD5和SHA1转成string，接口一直报500
  let aseKey = CryptoJS.MD5(CryptoJS.SHA1(tenantName.value + '.' + staId.value))

  let obj = {
    tenantName: tenantName.value,
    staId: staId.value,
    timestamp: timestamp.value
  }

  // 使用AES加密并转换为Base64编码
  const encryptedBase64 = encryptObjectAsBase64(obj, aseKey); 
  qrCode(tenantName.value,staId.value,encryptedBase64).then(res => {
    // console.log(res)
    // 参考Vue前端渲染blob二进制对象图片的方法，https://blog.csdn.net/qq_46123200/article/details/131949915
    const url = window.URL.createObjectURL(new Blob([res.data]));
    qrCodeUrl.value = url
  })

}

// 加密函数
// function encrypt(word: string | number , keyStr: string) {

//   let key = CryptoJS.enc.Utf8.parse(keyStr);
//   let srcs = CryptoJS.enc.Utf8.parse(word);
//   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
//     mode: CryptoJS.mode.ECB,
//     padding: CryptoJS.pad.Pkcs7
//   });

//   // 获取加密后的密文（Ciphertext）
//   const encryptedCiphertext = encrypted.ciphertext;
  
//   // 将密文转换为Base64编码字符串
//   const base64Encoded = CryptoJS.enc.Base64.stringify(encryptedCiphertext);

//   return base64Encoded;
//   // return encrypted.toString();
// }


function encryptObjectAsBase64(obj, aseKey) {
  // 序列化对象为 JSON 字符串
  const jsonStr = JSON.stringify(obj);
  // 将 JSON 字符串转换为 Utf8 编码的字节串
  const inputBytes = CryptoJS.enc.Utf8.parse(jsonStr);
  // 将 参数aseKey转换为 Utf8 编码的字节串  这步必须，不然报500
  const key = CryptoJS.enc.Utf8.parse(aseKey);

  // 使用 AES 加密
  const encrypted = CryptoJS.AES.encrypt(inputBytes, key, {
    mode: CryptoJS.mode.ECB, // 您可能需要根据实际需求选择合适的加密模式
    padding: CryptoJS.pad.Pkcs7, // 同样，根据需求选择合适的填充方式
  });

  // 获取加密后的密文（Ciphertext）
  const encryptedCiphertext = encrypted.ciphertext;

  // 将密文转换为 Base64 编码字符串
  const base64Encoded = CryptoJS.enc.Base64.stringify(encryptedCiphertext);

  return base64Encoded;
}



// // MD5加密方法
// function md5(word) {
//   return CryptoJS.MD5(word);
//   // return CryptoJS.MD5(word).toString(); // 以字符串形式返回结果 接口报500
//   // 以Base64字符串形式返回结果
//   // return CryptoJS.MD5(word).toString(CryptoJS.enc.Base64);
// }

// // SHA1加密方法
// function sha1(word) {
//   return CryptoJS.SHA1(word);
//   // return CryptoJS.SHA1(word).toString(); // 以字符串形式返回结果 接口报500
// }


onMounted(() => {
  getQrCode()
})


</script>

<template>
  <div> 
    <img :src="qrCodeUrl" alt="QR Code" style="width:66%">
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

以上是用axios请求的，以下是封装的request请求

src/utils/request.js

// 进行axios二次封装:使用请求与响应拦截器
import axios from "axios";
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 第一步:利用axios对象的create方法,去创建axios实例(其他的配置:基础路径、超时的时间)
const request = axios.create({
     // 基础路径
     baseURL: import.meta.env.VITE_APP_BASE_API,// 基础路径上会携带/api
     timeout: 5000// 超时的时间的设置
});
// 第二步:request实例添加请求与响应拦截器
request.interceptors.request.use((config) => {
    // config配置对象,headers属性请求头,经常给服务器端携带公共参数,例如token
     // 如果config.headers中已经设置了'Content-Type'，则保留；否则应用默认的'Content-Type'
     if (!config.headers.hasOwnProperty('Content-Type')) {config.headers['Content-Type'] = axios.defaults.headers['Content-Type'];}
     // 返回配置对象
    return config
  }
);
// 第三步:响应拦截器
request.interceptors.response.use((response) =>{
     // console.log("response.request.responseType",response.request.responseType)
     // 成功回调  简化数据
      return response.data
     }
, (error) => {
     // 失败回调:处理http网络错误的
     // 定义一个变量:存储网络错误信息
     let message = '';
     // http状态码
     const {status} = error.response;
     switch (status) {
          case 401:
               message = "TOKEN过期"
               break;
          case 403:
               message = "无权访问"
               break;
          case 404:
               message = "请求地址错误";
               break;
          case 500:
               message = "服务器出现问题"
               break;
          default:
               message = "网络出现问题";
               break;
     }
     return Promise.reject(message);
});
// 对外暴露
export default request;

请求接口函数