一、跨域问题解决 1.基于vite+vue3配置时,在vite.congig.js文件server项目中添加 proxy代理 文件名:vite.congig.js server: { open: true,//启动项目自动弹
文件名:vite.congig.js
server: { open: true,//启动项目自动弹出浏览器 port: '3000', proxy: { '/api': { target: 'http://localhost:8000/api/', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite } }
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' }});
在main.js中provide
app.provide('axios', axios)
在组件内获取
import { inject } from 'vue'
const axios = inject('axios')
axios.post()
具体代码如下:
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
// 加载 axiosimport axios from './http'const app = createApp(App)// 全局挂载axiosapp.provide('axios', axios)
import { inject } from 'vue' const axios = inject('axios') // @ts-ignore axios.post('/api/users/reGISter', props.registerUser)
来源地址:https://blog.csdn.net/lap2004/article/details/132310639
--结束END--
本文标题: 1.vue3+vite开发中axios使用及跨域问题解决
本文链接: https://www.lsjlt.com/news/413707.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0