跨域配置
模板位置:https://cli.vuejs.org/zh/config/#devserver-proxy 右侧导航栏vue.config.js - devServer.proxy,在target处修改。
// 跨域配置---位置 vue-cli官网上
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8088',
ws: true,
changeOrigin: true,
pathRewrite:{
"^/api":""
}
},
// '/foo': {
// target: '<other_url>'
// }
}
}
}
修改base.js文件
使用代理
/*
base.js
公共接口配置
*/
const base ={
//host:'http://localhost:8088',// 基础域名--小程序
host:'/api',//基础域名--H5
indexData:'/store/getStoreList',//首页接口
}
export default base
在HbuilderX上运行
效果
tips
-
修改了home.vue中的导航栏的部分样式,确保H5页面上导航栏显示正常
.item{ //flex: 1; display: inline-block; margin: 10rpx; color: #9b9b9b; }
-
修改了request.js文件,引用base.js,修改url,使主页的引用更加简洁
import base from './base.js' export default function(url,method='Get',data={},options={loading:true}){//传参时按顺序传 return new Promise((resovle,reject)=>{ //交互动画 if(options.loading){ uni.showLoading({ title:"数据加载中" }) } uni.request({ url:base.host+url, method, data, success:res=>{ if(res.data.status===200){ uni.showToast({ title:"数据加载完毕" }) } resovle(res.data) }, fail:error=>{ reject(error) }, complete() { // 成功或失败都执行 uni.hideLoading() } }) }) }
-
主页home.vue引用修改
let res = await request(base.indexData)