需求：发起一个请求，请求到服务器上的json数据，显示在前端界面
服务器json数据：http://www.xxx.com/test.json(个人域名不方便展示，用xxx代替隐藏）
数据是这样的，直接可以在浏览器访问到。
写代码:直接请求服务器接口的时候
<template>
<view>
<view class="cu-list menu-avatar">
<view class="cu-item" v-for="(item,index) in productList" :key="index">
<view class="">
<button v-if="item.isLeave === 0" @click.stop="isLeave()">离厂解绑</button>
<view v-else class="text-grey text-xs">{{item.leaveTime }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
/* this.$request.get('/api/test.json', {
}).then(res => {
// 打印调用成功回调
console.log(res)
this.productList = res.data.rows;
}) */
uni.request({
url: 'http://www.ixxx.com/test.json',
success: (res) => {
console.log(res.data);
this.itemList = res.data.rows;
}
});
},
},
}
</script>
<style>
page {
padding-top: 50px;
}
.header {
position: absolute;
top: 0;
height: 44px;
width: 100%;
line-height: 50px;
background-color: rgb(45, 47, 186);
color: #fff;
}
.header text {
display: inline-block;
text-align: center;
}
.cu-bar.fixed,
.nav.fixed {
top: 45px;
}
.cu-list.menu-avatar>.cu-item {
height: 92px;
margin: 10px;
box-shadow: 0 2px 5px -1px #c4c0c0;
}
</style>
这里是出现了跨域问题的哦
那么前端该怎么去解决跨域问题？
想到之前写vue项目的时候，遇到过一次
https://www.jianshu.com/p/b28cd8290b2a
而uniapp是基于vue的，那么解决办法应该也是差不多的
解决办法：
1：打开manifest.json文件，选择源码视图，在里面添加proxy代理
"devServer": {
"proxy": {
"/api": {
"target":"http://www.ixxxx.com",
"changeOrigin": true,//是否跨域
"secure": false,// 设置支持https协议的代理
"pathRewrite":{"^/api":"/"}
}
}
},
2：回到当前页面，修改请求路径
getList() {
uni.request({
url: '/api/test.json',
success: (res) => {
console.log(res.data);
}
});
},
3：当前页面完整代码（仅供参考）
<template>
<view>
<view class="cu-list menu-avatar">
<view class="cu-item" v-for="(item,index) in productList" :key="index">
<view class="">
<button v-if="item.isLeave === 0" @click.stop="isLeave()">离厂解绑</button>
<view v-else class="text-grey text-xs">{{item.leaveTime }}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
productList: [],
};
},
onLoad() {
this.getList();
},
methods: {
getList() {
uni.request({
url: '/api/test.json',
success: (res) => {
console.log(res.data);
}
});
},
},
}
</script>
<style>
page {
padding-top: 50px;
}
.header {
position: absolute;
top: 0;
height: 44px;
width: 100%;
line-height: 50px;
background-color: rgb(45, 47, 186);
color: #fff;
}
.header text {
display: inline-block;
text-align: center;
}
.cu-bar.fixed,
.nav.fixed {
top: 45px;
}
.cu-list.menu-avatar>.cu-item {
height: 92px;
margin: 10px;
box-shadow: 0 2px 5px -1px #c4c0c0;
}
</style>
4：运行，跨域问题解决，json数据请求到了，
就可以显示了
这里说的是在uni-app项目里面前端如何解决一下跨域问题
渲染json数据的代码就不写啦
代理路径
图片.png
