nuxt.js项目中axios的配置应该怎么写？

Question

我将axios的配置文件放在plugins/axios.js中,代码如下：

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')
 }
}

页面中使用：

import axios from '../plugins/axios'

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

    })
  }
}

保存后刷新页面报错：

这是为什么呢？我在mounted中请求是没有问题的
还有一个问题是，在axios.js中我想根据hostname来配置axios的baseURL，但是读不到hostname？

Answer 1

你的plugin/axios.js没有location这个变量。
要么你在.vue文件的created/mounted里读取location，要么直接把hostname写在dev.config.js和prod.config.js，按开发/生产环境区分。
分清出你的代码是在nodejs还是在浏览器运行的。
顺便，简单测试的报错如下（打开localhost:3000/test页面显示的内容):

Answer 2