智能网站价格,景区宣传网站制作模板,一个网站开发环境是什么,专业网站设计 软件vue访问服务端接口
配置跨域
前端跨域
打开vite.config.js#xff0c;在和resolve同级的地方添加配置。
proxy代表代理的意思
/api是以/api开头的路径走这个配置
target代表目标
changeOrigin: true,是开启跨域请求
rewrite是编辑路径。
(path) pa…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 /apiconst 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.objectsconsole.log(bannerList.value)console.log(res)})
}// 页面元素加载前调用getBannerList函数
onMounted(() {getBannerList()
})
其它问题
获取数据时我们用了res.data.objects其中objects是后端传回的key值。
配置api的时候注意一定要和后端的路由完全相同不能有任何区别包括结尾的/路由中有那访问路径中也一定要有。
无参数的get在路由的请求结尾已经要加/有参数的get不能加/
