nuxt axios跨域

场景：需要跨域请求接口
操作：
1.下载依赖

npm install axios @nuxtjs/axios @nuxtjs/proxy

2.在 nuxt.config.js 文件里面添加以下配置

modules: ['@nuxtjs/axios', "@nuxtjs/proxy"],
/*
   ** axios proxy
   */
  axios: {
    proxy: true
  },
  /*
   ** proxy
   */
  proxy: {
// 一旦devServer(5000)服务器接收到 /api/xxx 的请求，就会把请求转发到另一个服务器(3000)
  // 浏览器和服务器之间有跨域，但是服务器和服务器之间没有跨域
    '/api/': {
      target: 'http://www.XXX.com:xxxx',
 // 发送请求时，请求路径重写：将 /api/xxx --> /xxx （去掉/api）
      pathRewrite: {
        '^/api/': ''
      }
    }
  },
build: {
    vendor: ['axios'],
}

3.使用

return this.$axios.get('/api/xxx', { params: { keywords: this.xxx} })
        .then((res) => {
         console.log(res)
        })

然后就可以正常访问，但是同时出现了另外一个问题：
proxy只能用于开发环境
导致部署以后访问的接口地址变成了这样的

图片.png

解决方法
修改axios请求的写法，配置axios的baseUrl地址，根据判断为生产环境还是开发环境动态设置，如果时生产环境则baseUrl = “”，开发环境baseUrl=“/api”，这样以适应不同环境，OK修改完成，无论开发或生产环境均可正常运行，不需要额外修改。

参考：跨域之proxyTable——在开发和生产环境的不同配置