axios 使用错误的baseURL

Question

这是我的 main.js 文件：

import axios from 'axios';
import { createApp } from 'vue';
import App from './App.vue'
import router from './router.js';
import { createHead } from '@vueuse/head';

axios.defaults.baseURL = 'http://77.222.47.161:3000';

const head = createHead();
const app = createApp(App)
app.use(router, head);
app.mount('#app');

AppMain.vue：

import axios from 'axios';
import { useHead } from '@vueuse/head';
export default{
  created(){
    useHead({title: 'Импетус: Хореографическая студия'})
  },
  data(){
    return{
      fests: [],
      news: [],
      isAdmin: null,
    };
  },
  mounted(){
    this.loadData();
  },
  methods:{
    async loadData(){
      console.log('Base URL in Component:', axios.defaults.baseURL);
      let response = await axios.get('/main');
      this.fests = response.data.cards;
      this.news = response.data.news;
      this.isAdmin = response.data.isAdmin;
      console.log(this.isAdmin);
    },

控制台中没有 baseURL，我明白了： ” 获取http://localhost:3000/main net::ERR_CONNECTION_REFUSED

未捕获（承诺）... ”

为什么axios不使用我在main.js中设置的baseURL？

Answer 1

可能是因为你在 main.js 中设置了它，而不是在 AppMain.vue 中。

可以在 AppMain.vue 中设置它，也可以在导入的另一个文件中设置它，如下所示；

// props.js
import axios from 'axios';

axios.defaults.baseURL = 'http://77.222.47.161:3000';

// AppMain.vue
import axios from 'axios';
import "./props.js"

...