Axios 拦截器不会将数据发送到生产中的 API Heroku 应用程序

Question

这是我在生产中调试应用程序的第2部分

在第1部分中，我至少看到了是什么导致了我的问题，并设法解决了这个问题。

---

当我使用axios拦截器向托管在Heroku上的API发送请求时，每个请求对象在API 中都是这样的

{ 'object Object': '' }

在向API发送数据之前，我在axios中控制台.log((transformRequest，我可以看到我发送的数据实际上就在那里。

注意：我已经简单地使用测试了这个过程

axios.<HTTP_METHOD>('my/path', myData)
// ACTUAL EXAMPLE
await axios.post(
`${process.env.VUE_APP_BASE_URL}/auth/login`,
userToLogin
);

一切正常，我从服务器上取回数据。

虽然这很好，但我想将我的request实现抽象到一个单独的类中，就像下面所做的那样。

有人知道拦截器为什么会引起这个问题吗？我是不是滥用了它？

请求.ts

import axios from "axios";
import { Message } from "element-ui";
import logger from "@/plugins/logger";
import { UsersModule } from "@/store/modules/users";
const DEBUG = process.env.NODE_ENV === "development";
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 5000,
transformRequest: [function (data) {
console.log('data', data)
return data;
}],
});
service.interceptors.request.use(
config => {
if (DEBUG) {
logger.request({
method: config.method,
url: config.url
});
}
return config;
},
error => {
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
console.log('axios interception response', response)
return response.data;
},
error => {
const { response } = error;
console.error('axios interception error', error)
if (DEBUG) {
logger.error(response.data.message, response);
}
Message({
message: `Error: ${response.data.message}`,
type: "error",
duration: 5 * 1000
});
return Promise.reject({ ...error });
}
);
export default service;

登录.vue

/**
* Sign user in
*/
async onClickLogin() {
const userToLogin = {
username: this.loginForm.username,
password: this.loginForm.password
};
try {
const res = await UsersModule.LOGIN_USER(userToLogin);
console.log("res", res);
this.onClickLoginSuccess();
} catch (error) {
throw new Error(error);
}
}

用户模块(VUEX存储(

@Action({ rawError: true })
async [LOGIN_USER](params: UserSubmitLogin) {
const response: any = await login(params);
console.log('response in VUEX', response)
if (typeof response !== "undefined") {
const { accessToken, username, name, uid } = response;
setToken(accessToken);
this.SET_UID(uid);
this.SET_TOKEN(accessToken);
this.SET_USERNAME(username);
this.SET_NAME(name);
}
}

用户api类

export const login = async (data: UserSubmitLogin) => {
return await request({
url: "/auth/login",
method: "post",
data
});
};

Answer 1

我不确定你想用transformRequest做什么，但这可能不是你想要的。

引用文件，https://github.com/axios/axios#request-配置：

数组中的最后一个函数必须返回Buffer、ArrayBuffer、FormData或Stream 的字符串或实例

如果您只是返回一个普通的JavaScript对象，它将以您所观察到的方式被破坏。

transformRequest负责获取data值，并将其转换为实际可以通过导线发送的内容。默认实现需要做大量的工作来操作data和设置相关的头，特别是Content-Type。参见：

https://github.com/axios/axios/blob/885ada6d9b87801a57fe1d19f57304c315703079/lib/defaults.js#L31

如果您指定自己的transformRequest，那么您将替换该默认值，因此这些事情都不会自动发生。

在不知道你想做什么的情况下，很难提供进一步的建议，但你可能应该使用请求拦截器，而不是transformRequest来处理你想做的任何事情