uniapp 开发微信小程序访问网络图片报错403如何解决

我在使用uniapp开发微信小程序时，通过image组件加载网络图片出现了403错误。图片链接在其他平台可以正常访问，但在小程序中显示403 Forbidden。尝试过在微信开发者工具中勾选"不校验合法域名"选项，但问题依旧。请问如何解决这个问题？是否需要配置服务器或添加referer白名单？

gougou168 1楼

在uniapp中访问网络图片403错误，通常是因为图片服务器做了防盗链限制。解决方法：

使用image组件时添加referrer策略

<image src="url" referrer="no-referrer"></image>

将网络图片下载到本地再使用
联系图片服务商申请授权
使用代理服务器中转请求

推荐优先尝试第一种方法，简单有效。

ionicwang 2楼

在 UniApp 开发微信小程序时，访问网络图片返回 403 错误通常是因为图片服务器对来源进行了限制（如防盗链机制）。以下是几种解决方法：

1. 使用微信小程序 image 组件的 `referrer-policy` 属性

在 image 标签中设置 referrer-policy="no-referrer"，避免发送来源信息，绕过防盗链检查。

<image src="https://example.com/image.jpg" referrer-policy="no-referrer"></image>

2. 通过服务器代理请求

如果图片服务器严格限制来源，可以通过自己的服务器中转请求：

后端请求目标图片并返回给小程序。
小程序访问自己的代理接口获取图片。

3. 将图片下载到本地临时路径

使用 uni.downloadFile 下载图片到本地，再通过 tempFilePath 显示：

uni.downloadFile({
  url: 'https://example.com/image.jpg',
  success: (res) => {
    if (res.statusCode === 200) {
      this.imageUrl = res.tempFilePath; // 使用临时路径显示图片
    }
  }
});

4. 联系图片服务提供商

若图片来自第三方，请求对方将微信小程序的域名（如 servicewechat.com）加入白名单。

注意事项：

确保图片 URL 是 HTTPS 协议，微信小程序要求网络资源必须为 HTTPS。
检查图片链接是否有效或已过期。