uni-app HuilderX运行在本地时苹果手机无法显示线上图片和请求线上接口，打开网页接口直接进入失败回调

uni-app HuilderX运行在本地时苹果手机无法显示线上图片和请求线上接口，打开网页接口直接进入失败回调

开发环境 版本号 项目创建方式
Windows 7旗舰版 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.6

浏览器平台：Chrome

浏览器版本：92.0.4515.159

项目创建方式：HBuilderX

示例代码：

```html
<template>
<view class="content">
<image src="http://img1s.tuliu.com/lands_new/2019/10/23/5dafc282075e9_sml.png" mode="scaleToFill" lazy-load="true"></image>
</view>
</template> 
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
uni.request({
url: 'http://szxc.5fkj.com/api/land/LandList', //仅为示例，并非真实接口地址。
success:(res)=>{
alert(1)
console.log(res)
alert(res.data.code)
},
complete: ()=> {
// alert(2)
},
fail:(err)=>{
console.log(555)
console.log(err)
alert(3)
alert(err.errMsg)
uni.showToast({'title':JSON.stringify(err)})
}
});
},
methods: {

}  
}
</script> 
<style>

</style>

操作步骤：

<image src="http://img1s.tuliu.com/lands_new/2019/10/23/5dafc282075e9_sml.png" mode="scaleToFill" lazy-load="true"

预期结果：

让苹果手机也能正常请求接口显示图片

实际结果：

运行在本地时，苹果手机大多数时候无法显示图片，无法请求接口

更多关于uni-app HuilderX运行在本地时苹果手机无法显示线上图片和请求线上接口，打开网页接口直接进入失败回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app HuilderX运行在本地时苹果手机无法显示线上图片和请求线上接口，打开网页接口直接进入失败回调的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于iOS的安全策略导致的。在iOS设备上，当应用通过HTTP协议访问非加密资源时，系统会默认阻止这些请求，尤其是当应用运行在非HTTPS环境下时。

主要原因是：

  1. iOS的ATS（App Transport Security）策略要求所有网络请求必须使用HTTPS
  2. 本地运行的应用被视为不安全环境

解决方案：

  1. 配置manifest.json：
{
  "app-plus": {
    "compatible": {
      "ignoreInvalidSSL": true
    },
    "ssl": {
      "verify": false
    }
  }
}
  1. 使用相对路径或本地图片： 对于图片资源，建议：
  • 将图片下载到本地项目目录
  • 使用相对路径引用
  • 或者将图片转为base64格式
  1. 接口请求处理： 对于API请求，可以：
  • 确保接口支持HTTPS
  • 在开发阶段临时关闭ATS限制（仅调试用）
  • 使用uni-app的本地代理功能
  1. 检查网络权限： 确保在manifest.json中配置了网络权限：
{
  "permissions": {
    "UniNView": {
      "description": "网络请求"
    }
  }
}
  1. 使用条件编译： 针对不同平台做兼容处理：
// #ifdef H5
const baseUrl = 'http://your-api.com'
// #endif
// #ifdef APP-PLUS
const baseUrl = 'https://your-api.com'
// #endif
回到顶部