为什么 axios.postForm 工作而不是 axios.post

Question

所以，我尝试使用托管在 webhost 中的 API 登录，但为什么我的代码不能与 axios.post 一起使用，而只能与 axios.postForm 一起使用？ 什么是 axios.postForm？我也需要从 API 获取数据，但它只能与 axios.getUri 一起使用。什么是 axios.getUri？我不能使用。那么如果我使用 axios.getUri 谁能解释一下？谢谢你。

 try {
      const loginReq = await axios.postForm(
        "http://spdaapp.000webhostapp.com/api/auth/login",

        {
          headers: {
            "Content-Type": "application/json",
            accept: "*/*",
          },

          username: field.username,
          password: field.password,
        }
      );
      const loginResp = await loginReq.data;
      setLoading(false);
      if (loginReq.status === 200) {
        console.log(field.username);
        console.log(loginResp);

        Cookie.set("token", loginResp.access_token);
        Cookie.set("role", loginResp.status);
        router.push("/admin/dashboard");
      }
    } catch (error) {
      const err = error as AxiosError;
      // console.log(err.response?.status);
      // console.log(err.response?.data);

      setLoading(false);
      setShowSnackbar(true);
    }
  }

Answer 1

您的后端（API）服务器似乎需要

application/x-www-form-urlencoded

格式（类型）的请求正文（不是普通的 JSON 对象）

这就是使用

axios.postForm()

的原因。此方法将您的数据作为 FormData（在 JavaScript 中）发送。

您还可以通过在浏览器 DevTools (F12) 的 Network 选项卡上查看所选请求的 Payload 选项卡来了解这两种 axios 方法之间的区别。

如果您有权访问 API 实现，您可以尝试将 Request body 更改为

application/json

。那么

axios.post()

应该适用于您的情况。

请参阅Axios 文档页面了解更多详细信息。