如何配置 axios 基础 URL？答案

【问题标题】：How to configure axios base URL?如何配置 axios 基础 URL？
【发布时间】：2021-02-24 02:54:54
【问题描述】：

我正在尝试配置我的 axios 基本 URL。我从以下 StackOverflow 问题中找到了以下代码：

How do I create configuration for axios for default request headers in every http call?

但是，我收到“未处理的拒绝（TypeError）：无法读取未定义的属性“数据” （匿名函数）'错误。这篇文章只有2年，使用了一个类，但在我的代码中，我使用的是一个函数。

当我正常执行 axios 调用时（不更改基本 URL），它可以正常工作。但是当我添加 axiosConfig 并更改基本 URL 时，我得到了错误。

如果有人能对这个问题有所了解，我将不胜感激。

axiosConfig.js

import axios from "axios";

const baseURL = process.env.REACT_APP_BASE_URL;

const instance = axios.create({
  // .. congigure axios baseURL
  baseURL: `${baseURL}`
});

export default instance;

执行 axios 调用的文件

import axiosConfig from "../axios/axiosConfig";

export const getPosts = () => {
  const posts= (dispatch) => {
    return axiosConfig
      .get('/posts')
      .then((response) => { 
        dispatch({
          type: GET_POSTS,
          payload: response.data,
        });
      })
      .catch((error) => {
        dispatch({
          type: POSTS_ERROR,
          payload: error.response.data.message,
        });
      });
  };
  return posts;
};

【问题讨论】：

你能把整个代码示例贴在codesandbox上吗？似乎错误是在您的应用程序中的未定义变量数据中引发的，但我在您提供的代码示例中看不到参考
@SiddhantVarma 我将它添加到问题中。当我只使用 axios.get({$baseURL}/post) 时，axios 调用工作正常

标签： javascript reactjs axios

【解决方案1】：

它适用于我的生产和开发。

import axios from "axios";

const api = axios.create({
 baseURL: process.env.REACT_APP_BASE_URL || "http://localhost:3030",
});

export default api;

使用我做类似的事情

import api from "../services/api";
const response = await api.post("/sessions", { email, password });

【讨论】：

嘿迪吉。我仍然收到错误消息。我可以看看你 axios 调用的样子吗？
我编辑了，看看是不是我需要的，希望能帮到你
类似的东西。看我的代码。我正在做一个获取请求。当我进行常规 axios 调用时，它工作正常。但是当我编辑基本 URL 时，我得到了错误
最初我会检查对 .env 文件中配置的 REACT_APP_BASE_URL 的调用，这可能是问题

【解决方案2】：

在 App.js 中定义

import Axios from "axios";

Axios.defaults.baseURL = "http://127.0.0.1:8000/api/";

在任何其他组件中使用

http://127.0.0.1:8000/api/user 仅使用用户

axios.get('user')
.then((res)=> {
console.log(res)
})

【讨论】：

【解决方案3】：

你的 axiosConfig.js 文件没问题。

您正在访问值 = 未定义的对象的“数据”属性。我假设它是 response.data

请查看https://github.com/axios/axios/issues/883，在这里您可以找到有关您收到此回复的原因的更多信息

我的建议是

调试并检查response的值
在.then(...)末尾添加.catch(error => {...)

【讨论】：