平时用 Vue 写前端时,对于 axios 请求的常规操作一般是
- 统一定义好一个 axios 对象,使用
axios.defaults.baseURL
设置 baseURL- 也不是不能直接把服务器地址定义在这,但经常会导致跨域问题,所以一般还是用一个统一的标识,例如
/backend
或/api
- 也不是不能直接把服务器地址定义在这,但经常会导致跨域问题,所以一般还是用一个统一的标识,例如
- 在
vue.config.js
中定义代理 proxy
最近的项目中使用了 Nuxt.js 框架,发现相关功能的用法有些不同,于是做了一些整理。
nuxtjs/axios
Nuxt.js 自己封装了 axios 模块:@nuxtjs/axios。先在配置文件中引入模块:
// nuxt.config.js
export default {
modules: [
'@nuxtjs/axios',
],
}
引入后在 script
中(method, mounted
等等)就能从全局访问到,用法和普通 axios 一致。
methods: {
async fetchSomething() {
const ip = await this.$axios.$get('http://icanhazip.com')
this.ip = ip
}
}
baseUrl 直接在配置文件中配置:
// nuxt.config.js
export default {
modules: [
'@nuxtjs/axios'
],
axios: {
baseURL: 'http://localhost:8080',
},
}
nuxtjs/proxy
用 axios 直接向后端请求经常会发生 CORS 跨域问题,因此通常会使用代理。nuxt 中通过模块 @nuxtjs/proxy
处理代理。添加依赖后就可以在配置中开启 axios 的代理选项:
{
modules: [
'@nuxtjs/axios',
//'@nuxtjs/proxy' 只要添加了依赖也可以不手动引入模块
],
axios: {
proxy: true
},
}
开启代理选项后,baseURL 选项就会失效。如果依然希望在每个请求之前添加固定前缀可以使用 prefix
选项替代。nuxtjs/proxy 的配置方法与 Vue 中普通的代理写法基本一致。
{
axios: {
proxy: true,
prefix: '/backend',
},
proxy: {
'/backend': {
target: 'http://localhost:8080', // process.env.BACKEND_URL
pathRewrite: { '^/backend': '/' },
},
},
}
参考资料:@nuxtjs/axios 文档