Flutter Web构建后无法显示阿里云托管的网络图片求助

• 检查阿里云OSS跨域（CORS）配置
  Web端受浏览器同源策略限制，若OSS未配置允许Web域名的跨域请求，会导致图片加载失败。登录阿里云OSS控制台，进入权限管理 > 跨域设置，添加CORS规则：

  • 来源（Origin）：填写你的Web应用域名（如https://your-web-domain.com，测试阶段可临时用*，生产环境建议指定具体域名）
  • 允许的方法：勾选GET（图片加载依赖GET请求）
  • 允许的Header：测试阶段可填*，生产按需配置
  • 暴露的Header：按需设置，可留空
    保存规则后等待数分钟生效。

• 确认OSS文件访问权限
  检查图片文件的OSS权限是否为公共读：若设置为私有，本地开发环境可能因调试机制绕过权限验证，但Web构建后会返回403错误。可在OSS控制台的文件详情里修改权限为公共读，或在Web端使用签名后的临时URL访问私有文件。

• 排查Flutter Web的内容安全策略（CSP）
  若Web应用的index.html中配置了Content-Security-Policy，需确保允许加载阿里云OSS的域名。在<meta>标签的content字段中添加：

  img-src https://chilleasy-image.oss-cn-hongkong.aliyuncs.com 'self';
  

  避免CSP拦截图片请求。

• 验证网络请求状态
  在浏览器开发者工具的网络面板中查看图片请求：

  • 确认请求URL与本地开发时一致，无路径篡改
  • 查看响应状态码：403代表权限问题，404代表文件不存在，跨域错误会在控制台提示相关信息，根据具体错误针对性解决。

• 检查OSS访问域名有效性
  直接在浏览器地址栏输入图片链接，确认是否能正常显示。若无法显示，说明OSS本身存在配置问题（如域名未备案、区域访问限制等）；若能显示，再回到Web应用排查上述跨域、CSP等问题。

内容的提问来源于stack exchange，提问作者Tony Lam