小程序图片不显示,直接访问显示,头部配置问题

一、Cross-Origin-Resource-Policy 是干什么的?

它的作用只有一个:

控制:别人能不能加载你的图片、JS、CSS 等资源


二、你原来的配置(错误、导致图片不显示)

nginx

复制代码
add_header Cross-Origin-Resource-Policy **same-origin**;

意思:

只有我自己的网站,能加载自己的资源

谁不能加载?

  • 微信小程序 ❌
  • 别的域名 ❌
  • 外部网页 ❌
  • 手机端环境 ❌

结果:

小程序加载图片 → 被拦截 → ERR_BLOCKED_BY_RESPONSE


三、我让你改成的配置(正确、安全、图片正常)

nginx

复制代码
add_header Cross-Origin-Resource-Policy **cross-origin**;

意思:

允许【任何安全的外部站点】加载我的资源

谁可以加载?

  • 微信小程序 ✅
  • 你的 H5 页面 ✅
  • 外部安全域名 ✅
  • 手机端环境 ✅

结果:

小程序图片 → 正常显示 ✅


四、最关键:会不会有安全漏洞?

绝对不会!安全等级依然满分!

我给你对比:

表格

配置 效果 安全 小程序
same-origin 只允许自己 过高、太严格 ❌ 图片不显示
cross-origin 允许外部安全访问 ✅ 安全、不漏扫 ✅ 图片正常

cross-origin标准安全配置

99% 的网站、阿里云、腾讯云、小程序服务端 都用这个

不会带来任何漏洞 ,只是允许正常的外部访问

相关推荐
遇见~未来6 小时前
第一篇_认识CSS_风格的起点
前端·css
遇见~未来6 小时前
第二篇_CSS核心_盒子_布局_视觉
前端·css
林恒smileZAZ6 小时前
宇宙画布:纯 CSS+JS 实现交互式深空艺术
前端·javascript·css
m0_631653316 小时前
阿里云单机双网终极部署与运维白皮书:Nginx + PM2 + Prisma 踩坑实战
运维·nginx·阿里云·部署
Dxy12393102167 小时前
js如何根据开始位置结束位置在类表中取对应范围的数据
开发语言·javascript·ecmascript
钱端工程师7 小时前
vue自定义一个在线查看文件的组件(.xlsx、.docx、.pdf、图片等)
javascript·vue.js·pdf
p@ssword7 小时前
解决idea-2025.3.3重启项目/停止项目要点两次问题才生效问题
javascript·数据库·intellij-idea
sinat_255487817 小时前
收藏品·学习笔记
java·javascript·windows·学习·microsoft
01漫游者7 小时前
JavaScript内存管理与闭包
开发语言·javascript·ecmascript