1.vue3+vite开发中axios使用及跨域问题解决

一、跨域问题解决

1.基于vite+vue3配置时,在vite.congig.js文件server项目中添加 proxy代理

文件名:vite.congig.js

javascript 复制代码
  server: {
    open: true,//启动项目自动弹出浏览器
    port: '3000',
    proxy: {
      '/api': {
        target: 'http://localhost:8000/api/',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite
      }
    }

2.axios封装时设置基本路径baseURL

javascript 复制代码
  const instance = axios.create({
  baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
}
);

二、provide/inject 实现axios 全区使用

在main.js中provide

app.provide('axios', axios)

在组件内获取

import { inject } from 'vue'

const axios = inject('axios')

axios.post()

具体代码如下:

1.axios封装http.js
javascript 复制代码
import axios,{AxiosRequestConfig,AxiosResponse} from 'axios'
import { ElLoading } from 'element-plus';

let loading:any;
const startLoading = ()=>{
  interface Options {
    lock: boolean;
    text: string;
    background: string;
  };
  const options:Options = {
    lock: true,
    text: "加载中...",
    background: "rgba(0,0,0,0.7)"
  }
  loading = ElLoading.service(options)
}
const endLoading = ()=>{
  loading.close()
}
const instance = axios.create({
  baseURL:  '/api', // api的base_url import.meta.env.VUE_APP_BASE_API 也可以直接写
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
}
);
// 请求拦截
instance.interceptors.request.use((config:AxiosRequestConfig) =>{
  startLoading(); //  开始loading
  return config
})
// 响应拦截
instance.interceptors.response.use((response:AxiosResponse) =>{
  endLoading(); //  结束loading
  return response;
},error =>{
  return Promise.reject(error)  // 错误提醒
})

export default axios
2.全区应用main.js
javascript 复制代码
// 加载 axios
import axios from './http'
const app = createApp(App)
// 全局挂载axios
app.provide('axios', axios)
3.组件中使用
javascript 复制代码
 import { inject } from 'vue'

  const axios = inject('axios')

  // @ts-ignore
 axios.post('/api/users/register', props.registerUser)
相关推荐
小白学习日记1 小时前
【复习】HTML常用标签<table>
前端·html
丁总学Java1 小时前
微信小程序-npm支持-如何使用npm包
前端·微信小程序·npm·node.js
yanlele2 小时前
前瞻 - 盘点 ES2025 已经定稿的语法规范
前端·javascript·代码规范
懒羊羊大王呀2 小时前
CSS——属性值计算
前端·css
DOKE2 小时前
VSCode终端:提升命令行使用体验
前端
xgq2 小时前
使用File System Access API 直接读写本地文件
前端·javascript·面试
用户3157476081352 小时前
前端之路-了解原型和原型链
前端
永远不打烊2 小时前
librtmp 原生API做直播推流
前端
北极小狐2 小时前
浏览器事件处理机制:从硬件中断到事件驱动
前端
无咎.lsy2 小时前
vue之vuex的使用及举例
前端·javascript·vue.js