Vue3 配置代理和使用全局axios请求数据

简介: Vue3 配置代理和使用全局axios请求数据


vue3中配置全局代理和使用axios向服务器请求数据

main.ts

import { createApp } from 'vue'
import VueAxios from 'vue-axios'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import axios from 'axios'               // 引入axios
axios.defaults.baseURL = '/api'         
const app = createApp(App)  指向Vue
app.config.globalProperties.$rqst= axios 下挂载
app.use(VueAxios, axios)
app.use(store)
app.use(router)
app.mount('#app')

手动在vue3项目中创建vue.config.js,配置proxy

// const webpack = require('webpack');
// const webpack = require('webpack');
module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir:"statics",
  indexPath:"index.html",
  productionSourceMap: process.env.NODE_ENV !== 'production'? false : true,
  /* webpack-dev-server 相关配置 */
  devServer: { 
    /* 使用代理 */
    proxy: {
        '/api': {
            target: 'http://xxxx.xxxx.xxxx.xxxx:xxxx/',  // 目标代理服务器地址
            changeOrigin: true,                          // 允许跨域
            pathRewrite:{
              "^/api":''
            }
        },
    },
 },
}

某组件中使用请求

import { defineComponent, getCurrentInstance} from 'vue';
export default defineComponent({
  name:'name',
  props:{
    datas:{
        type: Object,
        default: function(){
            return {......};
        }
    }
  },
  //  setup 在整个组件生命周期前执行一次且仅一次,可以在这时获取全局参数的代理对象
  setup(props) {
    let datas = (props as any).datas;                  // 组件参数对象
    const { proxy } = (getCurrentInstance() as any);   // 全局变量代理对象
    return{
        proxy
    }
  },
  methods: {
      // 可以在 methods 中定义请求的函数以备调用
      getCodeList(user:string){
        this.proxy.$rqst.post('/mycode/getCodeList',{"user":user})
        .then((response: any)=>{
          ......
        });
      },
  },
});
目录
相关文章
|
2月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
79 1
|
10月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
477 1
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
201 2
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
1327 4
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `"repeat"`,以符合 Django 的解析要求。
499 2
|
12月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
161 0
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
806 0
|
缓存 JavaScript 前端开发
Vue(五)计算属性、过滤器、axios、vue 生命周期
Vue(五)计算属性、过滤器、axios、vue 生命周期
306 0
Vue(五)计算属性、过滤器、axios、vue 生命周期
|
2月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
255 2
|
16天前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
235 137