Flutter Web正常显示的Network Image在移动端无法加载（403错误）

问题概述 #

• Web端通过命令 flutter run -d chrome --web-renderer html --no-sound-null-safety 运行时，NetworkImage可正常展示图片
• 移动端运行时抛出403错误，但直接在浏览器打开图片URL能正常显示
• 错误详情：

========= Exception caught by image resource service ================================================
The following NetworkImageLoadException was thrown resolving an image codec:
HTTP request failed, statusCode: 403, https://shop.znindia.com/public/uploads/all/a4llgBQ6ExlDcp94FeFFhkJyFEqQsCyi88EDAl5D9CEvBt4nPa.jpg

When the exception was thrown, this was the stack:
#0 NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:117:9)

Image provider: NetworkImage("https://shop.znindia.com/public/uploads/all/a4llgBQ6ExlDcp94FeFFhkJyFEqQsCyi88EDAl5D9CEvBt4nPa.jpg", scale: 1.0)
Image key: NetworkImage("https://shop.znindia.com/public/uploads/all/a4llgBQ6ExlDcp94FeFFhkJyFEqQsCyi88EDAl5D9CEvBt4nPa.jpg", scale: 1.0) #

解决方案 #

1. 添加自定义User-Agent请求头 #

移动端Flutter的NetworkImage默认请求头和浏览器差异较大，部分服务器会拦截非浏览器标识的请求。给请求添加浏览器模拟的User-Agent：

• 修改NetworkImage构造：

NetworkImage(
  productImage,
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
  },
)

• 或修改Image.network：

Image.network(
  productImage,
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
  },
)

2. 补充Referer请求头（若服务器有校验） #

部分服务器会检查请求的Referer字段，Web端浏览器自动携带该字段，而移动端请求默认无此内容，导致被拦截。可添加对应域名的Referer：

NetworkImage(
  productImage,
  headers: {
    'Referer': 'https://shop.znindia.com/',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
  },
)

3. 排查网络缓存或DNS问题 #

• 重启App及测试设备
• 切换网络环境（如从WiFi切换到移动数据）重新测试
• 清除App缓存后重试

4. 验证请求头差异（进阶） #

若以上方案无效，用抓包工具（如Charles）捕获移动端请求的headers，对比浏览器请求的headers，找出差异后调整请求头配置。

内容的提问来源于stack exchange，提问作者Ishant Singh