vue访问服务端接口
配置跨域
前端跨域
打开vite.config.js,在和resolve同级的地方添加配置。
proxy代表代理的意思
"/api"是以/api开头的路径走这个配置
target代表目标
changeOrigin: true,是开启跨域请求
rewrite是编辑路径。
(path) => path.replace(/^\/api/, "")是去掉/api
这样一个路径进来就会被处理,如下:
"/api/config" --> "http://localhost:8000/config"
server: {
proxy: {
"/api": {
target: "http://localhost:8000",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, "")
}
}
},
后端跨域
配置api
在utils下新建apis.js文件
注意,我们只配置了/api,所以只有/api开头的路径才能走vite.config.js中的跨域配置。
配置好api文件后记得对外暴露
// 用于访问服务端接口
const apiHost = "/api"
const systemAPIs = {
sliderListUrl : apiHost + "/system/slider/list",
}
export{
systemAPIs
}
访问数据
在app.vue页面中完成访问数据
const bannerList = ref([])
// 访问接口获取数据
const getBannerList = () => {
ajax.get(systemAPIs.sliderListUrl).then(res => {
bannerList.value = res.data.objects
console.log(bannerList.value)
console.log(res)
})
}
// 页面元素加载前调用getBannerList函数
onMounted(() => {
getBannerList()
})
其它问题
获取数据时我们用了res.data.objects,其中objects是后端传回的key值。
配置api的时候注意一定要和后端的路由完全相同,不能有任何区别,包括结尾的/,路由中有那访问路径中也一定要有。
无参数的get在路由的请求结尾已经要加/,有参数的get不能加/