在nuxt.js中使用axios，推荐使用nuxt定制款nuxt/axios(https://axios.nuxtjs.org/)。相比原生axios有如下优势：

• 自动为客户端和服务器端设置baseURL
• 将setToken函数暴露给$axios，可以非常容易的进行全局Authentication tokens设置
• 基于baseURL发起请求时，自动启用withCredentials
• 添加用于服务器端渲染的Proxy请求Header
• 支持使用axios加载CSS
• 与Nuxt进度条集成
• 与Proxi模块集成
• 使用axios-retry自动重试请求

对于@nuxt/axios的使用说明参考官网即可。此处对一些重点配置进行说明。

nuxt.config.js

export default {
  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://127.0.0.1:4000', // 此处需要填写和privateRuntimeConfig相同的配置内容，方便服务器端请求
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: process.env.BROWSER_BASE_URL // 此处填写客户端请求API的地址
    }
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: 'http://127.0.0.1:4000' // 此处填写在服务器端请求API的地址
    }
  },
}

在进行同构的时候，privateRuntimeConfig配置中的baseURL只有在服务器端请求才会生效，而browserBaseURL则是客户端请求的时候的baseURL地址。

例如，服务器中API服务器监听了4000端口，因此在服务器端，nuxt.js程序通过'http://127.0.0.1:4000'请求API，而客户端则通过https://域名请求API。

同理，在内网负载均衡环境下，privateRuntimeConfig配置中的baseURL则需要设置为内网请求地址，相应的browserBaseURL是外网地址。如果不这样设置，可能导致内网也通过外网域名进行API请求，甚至导致CDN循环回源而出现508错误。