网站建设具备知识技能,网页版传奇源码,一万元做网站,郑州小程序一、跨域问题解决 1.基于vitevue3配置时#xff0c;在vite.congig.js文件server项目中添加 proxy代理 文件名#xff1a;vite.congig.js server: {open: true,//启动项目自动弹出浏览器port: 3000,proxy: {/api: {target: http://localhost:8000/api/,changeOrigin: true,rew…一、跨域问题解决 1.基于vitevue3配置时在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;charsetUTF-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;charsetUTF-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 vueconst axios inject(axios)// ts-ignoreaxios.post(/api/users/register, props.registerUser)
