一、跨域问题解决
1.基于vite+vue3配置时,在vite.congig.js文件server项目中添加 proxy代理
文件名:vite.congig.js
server: {open: true,//启动项目自动弹出浏览器port: '3000',proxy: {'/api': {target: 'http://localhost:8000/api/',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite}}
2.axios封装时设置基本路径baseURL
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
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(); // 开始loadingreturn config
})
// 响应拦截
instance.interceptors.response.use((response:AxiosResponse) =>{endLoading(); // 结束loadingreturn response;
},error =>{return Promise.reject(error) // 错误提醒
})export default axios
2.全区应用main.js
// 加载 axios
import axios from './http'
const app = createApp(App)
// 全局挂载axios
app.provide('axios', axios)
3.组件中使用
import { inject } from 'vue'const axios = inject('axios')// @ts-ignoreaxios.post('/api/users/register', props.registerUser)