场景：需要跨域请求接口
操作：
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修改完成，无论开发或生产环境均可正常运行，不需要额外修改。
