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

一、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% 的网站、阿里云、腾讯云、小程序服务端 都用这个

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

相关推荐
life码农8 小时前
Linux截取Nginx指定时间段日志的三种方法(grep/awk/sed)
linux·nginx
研☆香9 小时前
聊一聊前端的常见字 关键字
开发语言·前端·javascript
日光倾11 小时前
TypeScript 随手记 —— 1
前端·javascript·typescript
小飞侠在吗13 小时前
Windows 下 Nginx 访问 127.0.0.1 报 50x 错误:根因是路径里 \t 被当成 Tab
运维·windows·nginx
Buke..13 小时前
【APP 逆向】哔哩哔哩 sign 参数逆向(下):OLLVM 混淆还原 sign 算法
java·javascript·爬虫·python·算法
前端炒粉15 小时前
长会话虚拟滚动与渲染优化
前端·javascript·vue.js
谙忆102415 小时前
图片裁剪总是跑偏?用 object-fit、object-position 和真实像素把坐标对齐
javascript·css·图像识别
花归去16 小时前
ant的a-table更改表格的高度
前端·javascript·html
sibylyue16 小时前
基于 Vben Admin 框架的 Vue 3 前端项目配置文件及常用命令
前端·javascript·vue.js
liuyicenysabel16 小时前
Flask 个人站 iProfile 上线笔记(k3s + Nginx + Let‘s Encrypt)
笔记·nginx·flask