前端 | Nuxt.js axios baseURL，proxy 代理
2024-10-11 23:23:58
平时用 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 文档
最新文章
- 苹果手机Safari无痕浏览模式下系统登录成功但是页面不跳转
- [LeetCode] Number of 1 Bits 位1的个数
- easyUI创建dialog弹框
- jsp开发模式和web计算器案例
- MyEclipse------快速写入内容到指定目录下的文件(字节输出流)
- 【原创】storyboard启动应用程序的大致流程
- iOS - ImageCache 网络图片缓存
- 发布在IIS上的Web程序，调用服务器的COM组件
- SASS学习笔记_02
- linux下查找文件
- Java开发工具(Eclipse中内容辅助键的使用)
- linux下anaconda和keras配置过程
- switch and checkbox
- python之dict与set实现原理之hash算法
- KVO的使用一
- C语言强化——字符串（2）
- tf.while_loop
- 12th 对礼物挑选小工具的WBS功能分解
- C++ 函数的扩展①
- mybatis的foreach写用法