- axios 封装
新建request.js文件
新建接口文件如 api.jsimport axios from "axios"; const baseURL='http://127.0.0.1:8080'; const instance = axios.create({baseURL}); //响应拦截器 instance.interceptors.response.use( result=>{ return Promise.resolve(result.data) }, error => { //异步状态转化为失败状态 return Promise.reject(error); } ) export default instance;
在vue中使用import request from '@/util/request' //菜单列表 export function getIndex(){ return request({ url:'/fast/api/getApiList', method:'get' }) }
<script setup> import {getIndex} from "@/api"; import {ref} from "vue"; const data=ref(); function getList(){ getIndex().then(res=>{ data.value=res }) } getList() </script> <template> {{data}} </template> <style scoped> </style>
- 跨域解决
修改request.js文件
import axios from "axios";
//代理地址
const baseURL='/dev-api';
const instance = axios.create({baseURL});
//响应拦截器
instance.interceptors.response.use(
result=>{
return Promise.resolve(result.data)
},
error => {
//异步状态转化为失败状态
return Promise.reject(error);
}
)
export default instance;
修改 vite.config.js文件
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
// 跨域代理配置 将地址 http://localhost:88/api 转换为 http://localhost:8080/test
server: {
port: 88,
host: true,
open: true,
proxy: { //1. 将本/api 地址转换为 http://localhost:8080/api
'/dev-api': {
target: 'http://localhost:8080', //服务器接口地址
changeOrigin: true,
//2.将 /api 路径替换为 /test
rewrite: (p) => p.replace(/^\/dev-api/, '/test')
}
}
},
})