前端 - 急！！Vue 3 Axios 请求方法丢失如何解决？

Question

与手上其他项目一样，axios.create的二次封装是一样的，而 API 模块从链式调用改成了单个函数导出调用。
然后，接口调用时出了问题，期望有大佬能够帮忙看看如何解决。
以下是部分代码：

// login.vue setup async
const accountFormOptions = reactive({
  username: '',
  password: '',
  client: 'admin',
  loginType: 'password',
  captcha: '',
  captchaKey: ''
});

// 传入固定的参数对象可以正常调用
const result = await useOnlineUserLogin({
  username: '',
  password: '',
  client: 'admin',
  loginType: 'password',
  captcha: '',
  captchaKey: ''
});

// 通过传入的代理数据会出现请求方法丢失及请求头丢失，然而在二次封装的 axios.ts 定义参数直接调用时又能正常使用，这里是和上述代码同一文件
await useOnlineUserLogin(accountFormOptions);

// iam.online.ts
import axios from './axios'

export const useOnlineUserLogin = (data: IAMBuiltInModule.User.Online.Login, options?: AxiosRequestConfig) => {
  return axios.post<any, FetchResponse>(
    "/iam/token/login",
    data,
    options
  )
}

// axios.ts
import axios from 'axios'

const instance = axios.create({ baseURL: '...', timeout: 30 * 1000 });
instance.interceptors.request.use(config => {
    config.headers = config.headers ?? {};
    config.headers.Authorization = 'dev';
    return config;
});

export default instance;

提供项目接口目录：

| service
| -- api
| -- -- iam.online.ts
| -- typings
| -- axios.ts

Answer 1

import { reactive, toRaw } from 'vue';

// login.vue setup async
const accountFormOptions = reactive({
  username: '',
  password: '',
  client: 'admin',
  loginType: 'password',
  captcha: '',
  captchaKey: ''
});

await useOnlineUserLogin(toRaw(accountFormOptions));

Answer 2

应该是reactive的问题你需要用toRefs把该响应式对象结构成普通对象进行传值

Answer 3

谢谢 @a2774206 @乔治 的回答。
经过代码检测后，发现不是我写的有问题，而是公司防火墙对弱密码进行了拦截，因此第二次请求才会一直超时，这一点是我没了解到的。
至于为什么传入固定参数可以通过是因为值为空。