How should the configuration of axios in the nuxt.js project be written?

I put the configuration file of axios in plugins/axios.js with the following code:

import axios from "axios"
import qs from "qs"

const hotName = location.hostname
if (hotName === "localhost") {
  axios.defaults.baseURL = `//xxxx.com/api`
  axios.defaults.withCredentials = true
} else {
  axios.defaults.baseURL = `//${hotName}/api`
  axios.defaults.withCredentials = true
}
axios.defaults.baseURL = `//ask.hishixi.com/api`
axios.defaults.withCredentials = true
// POST
axios.interceptors.request.use((config) => {
 if (config.method === "post") {
  config.data = qs.stringify(config.data)
 }
 return config
}, (error) => {
 return Promise.reject(error)
})

// 
axios.interceptors.response.use(function (res) {
  return res.data
}, function (error) {
  return Promise.reject(error)
})
  

export function fetch (url, params) {
 return new Promise((resolve, reject) => {
  axios.post(url, params)
   .then(res => {
    resolve(res.data)
   })
   .catch((error) => {
    reject(error)
   })
 })
}
export default {
 // 
 getHeaderList () {
    return axios.get("/Index/headerUrl")
 }
}

use:

in the page
import axios from "../plugins/axios"

export default {
  asyncData ({}) {
    return axios.getHeaderList().then(res => {

    })
  }
}

Refresh page after saving reported an error:

clipboard.png

clipboard.png

Why is this? There is no problem with my request in mounted
another problem is that in axios.js I want to configure axios"s baseURL, according to hostname, but I can"t read hostname?

Mar.11,2021

your plugin/axios.js does not have the variable location.
either you read location, in the created/mounted of the .vue file or write the hostname directly in dev.config.js and prod.config.js , differentiated by development / production environment.
tell whether your code is running in nodejs or in a browser.
by the way, the error report for a simple test is as follows (open the localhost:3000/test page):


Menu