【微信小程序开发】【SpringBoot】解决真机调试中无法向后台请求数据的问题

文章描述了在开发微信小程序并结合SpringBoot后台时遇到的问题,即在真机调试时无法正确请求数据。作者提供了解决方案,包括获取本机IPv4地址,配置SpringBoot的server.address,设置微信小程序请求的IP地址,确保手机和电脑在同一网络环境下。遇到的报错是由于IP地址变化导致,建议在真机调试时才进行IP配置,以避免频繁修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

最近做了一个微信小程序+SpringBoot的一个项目,在编译器中用localhost请求后台可以实现,但是在手机上进行真机调试就无法正确的从后台请求数据,问题已经解决,下面是我的一点经验

获取本机的ip地址(ipv4)

这里macOSWindows有区别,本人用的是macOS,在控制台输入ifconfig,找到en0中的ipv4地址
在这里插入图片描述
windows我记得控制台命令是ipconfig

手机打开开发者模式

这个因为每个手机操作不同,这里也请读者自行解决,这一步存疑,因为我在网上搜的解决方法是有一步进入开发者模式的,但是本身我手机就在开发者模式,所以我也不太清楚是不是必须要进入开发者模式

SpringBoot中配置刚刚查询到的ipv4地址

application文件中配置sever中的address为刚刚查询到的ip地址
在这里插入图片描述
注意这里只需要配置一下SpringBoot的ip,mysql的url不用改变

配置微信小程序向后台请求的ip地址

平时我们用电脑进行开发都习惯用localhost来向后端进行请求,但是真机调试必须配置一下,
将我们平时请求的http://localhost:8080改为刚刚请求的ip,http://192.168.xxx.xxx:8080的形式
在这里插入图片描述

将手机和电脑处在一个网络之中

我一开始用的校园网,调试是会出错,所以我直接用手机开热点给电脑,直接用局域网来进行链接在这里插入图片描述
最后真机调试就可以用手机从我们电脑端SpringBoot后台获取数据了

常见问题

在配置完sever.address后运行报错

org.springframework.context.ApplicationContextException: Failed to start bean 'webServerStartStop'; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server

这里的原因是你的IP地址变化了,这时候我们要重新查找IP地址来进行配置,可能因为是我的网络用的是DHCP导致一段时间就回动态的改变IP地址?所以本人的建议还是只在本机开发就一直用localhost就行了,真机调试的时候再按照这个步骤改回来,不然隔三差五还要查找IP修改也是挺麻烦的

<think>我们正在解决SpringBoot微信小程序真机调试图片不显示的问题。根据用户描述,在真机调试图片不显示,但点击后可见。这通常与图片路径、网络请求权限或小程序安全域名配置有关。参考引用[1]的内容:小程序上线必须校验https,并且需要将域名配置到小程序安全域名中。因此,我们需要确保以下几点:1.SpringBoot后端服务必须使用HTTPS(在真机调试,小程序要求请求的域名必须是HTTPS且已备案)。2.在小程序后台配置request合法域名,包括图片所在的域名。另外,引用[2]提到了一个SpringBoot手机配件商城微信小程序的毕业设计,其技术栈包括Java、MySQL和SpringBoot框架,这提示我们项目结构可能是典型的SpringBoot后端服务提供图片资源。具体步骤:1.确保后端服务支持HTTPS。如果是本地调试,可以使用内网穿透工具(如ngrok)将本地服务映射到HTTPS域名,或者使用自签名证书(但真机调试自签名证书可能不被信任,所以建议使用已备案的域名和正式证书)。2.在小程序后台(https://mp.weixin.qq.com)的“开发”->“开发设置”->“服务器域名”中,将你的后端域名(如www.pyjwyx.com)添加到request合法域名列表中(注意:需要包括https协议,且不能包含端口,默认443端口)。3.检查小程序代码中图片的URL是否使用了HTTPS,并且域名是配置过的合法域名。4.注意:真机调试微信小程序对于未验证的域名会拦截请求,导致图片无法加载。但是点击后可见,可能是因为点击事件触发了图片预览,预览可能绕过了安全校验(或者使用的是临路径,临路径可能不受限制)。另外,还要检查SpringBoot后端是否允许跨域(虽然小程序不涉及跨域,但如果是浏览器调试则需要)。在SpringBoot中可以通过配置CORS解决:```java@ConfigurationpublicclassCorsConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET","POST","PUT","DELETE","OPTIONS").allowedHeaders("*").maxAge(3600);}}```但是,如果图片是存储在本地文件系统,需要确保通过HTTP(S)可以访问到。例如,在SpringBoot中配置静态资源映射:```java@ConfigurationpublicclassWebMvcConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){registry.addResourceHandler("/images/**").addResourceLocations("file:D:/upload/");//本地图片存储路径}}```如果图片是通过数据库存储的,则需要提供接口来读取图片,并确保接口地址的域名也配置在了小程序的安全域名中。常见问题排查:-真机调试,打开调试模式(vConsole)查看网络请求,确认图片请求是否被拦截,并查看返回状态。-检查图片URL是否正确,在真机上是否可以访问(可以在手机浏览器中尝试打开图片URL)。-检查SpringBoot服务是否正常启动,并且端口映射正确(如果使用内网穿透,确保穿透的地址正确)。总结步骤:1.配置HTTPS(生产环境必须,真机调试也需要安全域名)。2.小程序后台配置安全域名(包括图片所在的域名)。3.检查图片路径,确保使用HTTPS的合法域名。4.检查后端静态资源映射或图片接口是否正确。如果按照以上步骤操作,应该可以解决真机调试图片不显示的问题。</think>### SpringBoot 微信小程序真机调试图片不显示解决方案 #### 问题分析 真机调试图片不显示但点击后可见,通常由以下原因导致: 1. **HTTPS 域名未校验**:小程序要求所有网络请求必须使用 HTTPS 且域名需备案[^1] 2. **安全域名未配置**:图片域名未添加到小程序后台的 `request` 合法域名列表 3. **路径协议错误**:图片 URL 使用了 HTTP 协议或本地路径 4. **跨域问题**:后端未配置 CORS 策略 #### 解决步骤 ##### 1. 配置小程序安全域名 在小程序后台(https://mp.weixin.qq.com)操作: ```markdown 开发管理 → 开发设置 → 服务器域名 → 修改 request 合法域名 添加您的域名:`www.yourdomain.com` 和 `yourdomain.com`(无协议前缀) ``` ![域名配置示例](https://res.wx.qq.com/wxdoc/dist/assets/img/domain-setting.ae946219.png) ##### 2. SpringBoot 后端配置 **application.yml 配置:** ```yaml server: ssl: key-store: classpath:keystore.p12 # HTTPS 证书 key-store-password: 123456 key-store-type: PKCS12 ``` **CORS 全局配置:** ```java @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") // 生产环境替换为小程序域名 .allowedMethods("GET", "POST") .allowCredentials(true) .maxAge(3600); } } ``` ##### 3. 图片路径处理 小程序端使用 **绝对 HTTPS 路径**: ```javascript // 错误示例(本地路径) imageUrl: '/images/logo.png' // 正确示例(HTTPS 绝对路径) imageUrl: 'https://www.yourdomain.com/static/images/logo.png' ``` ##### 4. 真机调试验证 打开微信开发者工具: ```markdown 1. 点击"真机调试"按钮 2. 扫描二维码在手机上测试 3. 打开调试面板查看网络请求 ▶ 检查图片请求是否返回 403(域名未配置) ▶ 检查协议是否为 https ``` #### 常见问题排查 | 现象 | 解决方案 | |------|----------| | 开发工具显示但真机不显示 | 检查小程序后台域名配置 | | 点击后显示预览图 | 确认图片 URL 是否为 HTTPS | | 安卓正常但 iOS 不显示 | 检查证书有效性(TLS 1.2+) | | 返回 403 Forbidden | 添加域名到 `request` 合法列表[^1] | #### 注意事项 1. **域名备案要求**:所有配置域名必须完成 ICP 备案 2. **证书有效性**:使用受信任的 CA 证书(如 Let's Encrypt) 3. **缓存问题**:修改配置后需**重新编译**小程序并**清除手机缓存** 4. **测试环境方案**:本地调试可使用微信开发者工具的 `不校验合法域名` 选项 > 配置完成后,真机图片加载流程: > $$ \text{小程序} \xrightarrow{\text{HTTPS请求}} \text{SpringBoot服务} \xrightarrow{\text{安全响应}} \text{图片渲染} $$
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值