配置跨域

首先在mainifest.json中的源码视图中配置跨域。

"h5": {"devServer": {"port": 8080,"disableHostCheck": true,"proxy": {"/dpc": {"target": "https://www.edonguoji.cn","changeOrigin": true,"secure": false,"pathRewrite":{"^/dpc":""}}}}},

解析：

"h5": {“devServer”：{“端口”：8080，“残疾HostCheck”：没错，“代理”：{“/DPC”：{“目标”：“Https://www.edonguoji.cn“"changeOrigin": true,“安全”：虚假，“路径重写”：{“^/dpc”：“”}}}}
},

图片显示问题

然后使用uni.request发起请求，url前缀为/dpc

请求后发现能在浏览器运行，而在微信小程序不能运行。

然后切换接口,url前缀为自己的域名。

现在浏览器出现跨域问题，小程序正常请求到。

原因

遇到这种问题是因为小程序不能进行服务器代理，而H5浏览器可以进行服务器代理操作。

解决方案：

此时我们可以使用uniapp官方提供的条件编译：https://uniapp.dcloud.io/platform。我们使用官方文档的方法进行解决。

先来做个测试

         // #ifdef H5console.log("这是h5页面")// #endif// #ifdef MP-WEIXIN console.log("这是微信小程序页面")// #endif

此时你会发现能呈现不同的效果，这时候可以把url定义为一个动态的值放进data里面进行判断。

 data(){return{list:[],url:'/index.php/index/index/getImgList'}},

判断是小程序的话就用自己的域名，如果是H5的话，就使用/dpc

 // #ifdef H5console.log("这是h5页面")this.url="/dpc"+this.urluni.request({url:this.url,success:function(res){console.log(res)}})// #endif// #ifdef MP-WEIXIN  console.log("这是微信小程序页面")this.url="https://www.edonguoji.cn"+this.urluni.request({url:this.url,success:function(res){console.log(res)}})// #endif

这样就可以获得到接口了，然后就可以对接口的数据进行处理之后放在页面中。

解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。相关推荐

解决uniapp开发微信小程序预览pdf文件ios\安卓兼容问题
问题项目需要用uniapp来开发微信小程序,其中,有一个功能是预览pdf, 后台以链接形式返回pdf地址,一开始使用web-view做链接跳转,但是出现ios文件可以正常打开,android打不开的 ...
uniapp实现微信小程序用户实时位置定位并显示地图
目前,我们可以通过一些现成的api来实现此功能.下面我将介绍一下通过腾讯位置服务来实现此功能的具体操作流程. 1.在Hbuilder x中对项目进行权限开放进入到manifest.json文件中 2 ...
uni-app开发微信小程序（获取多张本地相册图片并上传到服务器功能）
思路: 用户触发某一事件弹出一个弹窗(用户可能直接手机拍摄或者直接从手机相册选择照片),用户选择完方式后,调用对应的api并把选择好的照片上传到服务器. 涉及到的API: 1.uni.showActi ...
uniApp 生成微信小程序图片上传提示 fail url not in domain list 的解决方法
问题表现: uniApp 生成微信小程序,获取内容程序不报错,但是图片上传提示 fail url not in domain list 错误. 问题分析: 微信小程序:服务器域名配置每个微信小程序需 ...
uniapp微信小程序 map地图markers图标不显示，markers图标真机调试不显示
uniapp微信小程序 map地图markers图标不显示,markers图标真机调试不显示举例: 预期效果如下,蓝色为用户位置,红色为店铺位置均为自定义图标实际发布后手机上的效果 (此处忽略位置 ...
uni-app分割线微信小程序端不显示
uni-app分割线微信小程序端不显示文章目录 uni-app分割线微信小程序端不显示问题描述解决方案问题描述做项目时,遇到一个问题: 自定义的分割线组件在web端能显示,在微信小程序端却不 ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
uniapp实现微信小程序云开发数据库访问，并解决云开发数据库获取不到数据问题
uniapp实现微信小程序云开发数据库访问,并解决云开发数据库获取不到数据问题使用工具是HBuilder X 1.配置好AppID(小程序ID) 在HBuilder X工具的manifest.js文 ...
uniapp微信小程序服务器与行内img src图片路径拼接
uniapp微信小程序服务器与行内img src图片路径拼接 1.在main.js 在行内直接引入运行就可以连接到服务器的图片了

解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。

配置跨域

图片显示问题

原因

解决方案：

解决uniapp在微信小程序显示图片/数据，h5不显示图片/数据。相关推荐

最新文章

热门文章