WordPress 使用 CDN 之后,为什么小程序上图片不显示,网站上小图标变成方格?
前面我们解释了 WordPress 使用 CDN 之后,为什么图片不显示或部分没有被替换成 CDN 域名,今天我们继续来解答 WPJAM Basic 插件「CDN 加速」功能的常见问题,今天是关于图片防盗链和资源跨域的问题。
- 我设置了 CDN 之后,为什么我小程序上图片不显示了?
- 我使用 CDN 之后,为什么网站上的小图标显示成空方格?
照旧,开始之前,还是建议先看看详细的使用说明:
- WordPress 博客使用阿里云对象存储 OSS 进行静态资源 CDN 加速
- WordPress 博客使用腾讯云对象存储 COS 进行静态资源 CDN 加速
- WordPress 博客使用火山引擎 veImageX 进行静态资源 CDN 加速
小程序上图片不显示?
这是因为很多用户为了节约费用,防止图片被人盗链,在云存储上给图片设置了防盗链,只给自己的博客域名使用。而小程序是通过 API 接口和前端的交互,请求图片的 Referer 不是你的 WordPress 站点,自然不显示了。
所以解决方法有两个,最简单的就是关闭防盗链,但是这样又怕被人盗链,那么如何想要设置防止其他站点盗链我们的图片,又能给自己的小程序使用呢?
经过我深入的研究,微信小程序展示的图片的 Referer 是空或者 https://servicewechat.com
,所以我们只要在云存储上防盗链设置开启「空 Referer」,并加上 https://servicewechat.com
即可。
下面讲讲在具体云存储是怎么设置的:
阿里云 OSS 防盗链设置:
选择要设置的 bucket 之后,选择「权限管理」-「防盗链」:
开启「空 referer」,Referer 除了自己站点之外,加上 https://servicewechat.com
。
腾讯云 COS 防盗链设置:
选择要设置的存储桶之后,选择「安全管理」-「防盗链设置」:
类型选择「白名单」,空 referer 选择「允许」,Referer 除了自己站点之外,加上 servicewechat.com
。
火山引擎 veImageX 防盗链设置:
火山引擎 veImageX 的防盗链设置有点深,首先选择要设置的服务,点击「基础配置」,然后再「域名信息」中要设置的 CDN 域名,点击「配置」,最后编辑「防盗链」设置:
类型选择「referer白名单」,包含空referer开启,规则:输入域名和servicewechat.com
,注意 veImageX 使用 ;
分割多个域名。
小图标显示成空方格?
首先说明一下,这些小图标不是图片,而是图标字体,所以这是因为当前 WordPress 的主题是使用了字体图标造成的 CORS 资源跨域问题。
WPJAM Basic 对静态资源进行 CDN 加速之后,如果 CSS 里面使用了一些字体文件,字体文件也会镜像到 OSS。这时打开浏览器的开发者中心,如果在控制台出现下面的错误信息:No 'Access-Control-Allow-Origin' header is present on the requested resource。
这是跨域资源共享 (CORS) 机制造成的,该机制使用附加的 HTTP 头来告诉浏览器,是否允许运行在一个源上的 Web 应用访问位于另一不同源的资源,当一个 Web 应用发起一个与自身所在源(域,协议和端口)不同的 HTTP 请求时,它发起这个 HTTP 请求的即跨源 HTTP 请求。
知道什么问题就知道怎么去解决了,最简单的就是不要镜像 CSS 文件,这样就不会镜像字体文件,就不会有跨域的问题,如果还是希望静态文件都做 CDN 加速,那么只需在 CDN 设置一下字体文件允许跨域访问,下面讲讲在具体云存储是怎么设置的:
阿里云 CDN 跨域设置:
登录阿里云 CDN (不是 OSS)控制台,在域名管理页面,选择需要配置的域名,点击「缓存配置」 > 「自定义HTTP相应头」,单击添加:
自定义响应头参数选择「Access-Control-Allow-Origin」,取值请根据现场环境而定,如果不清楚直接输入 * 即可。
腾讯云 COS 跨域设置:
登录腾讯云 COS(不是 CDN,每个平台不一样)后台,选择要设置的存储通之后,点击「安全管理」-「跨域访问CORS设置」,添加规则:
来源 Origin 输入自己博客的域名,操作 Methods 全选或者按照上图输入,其他也可以按照上图输入,最后保存即可。
火山引擎 veImageX 跨域设置:
火山引擎 veImageX 的跨域设置和防盗链设置一样,首先选择要设置的服务,点击「基础配置」,然后再「域名信息」中要设置的 CDN 域名,点击「配置」,最后编辑「HTTP Header配置」设置,添加一条规则:
最后老是老规矩,贴一下 WPJAM Basic 支持的云存储服务,记得点我的链接,这三家土豪会给佣金的,我有钱赚了,就能够更加专注更新和优化插件了。🤩
云服务 | 链接 |
---|---|
阿里云OSS | https://wpjam.com/go/aliyun |
腾讯云COS | https://wpjam.com/go/qcloud |
火山引擎veImageX | https://wpjam.com/go/volc-imagex |
专题:WordPress CDN 加速:
- WPJAM Basic 的 CDN 加速功能和主题自带的 CDN 功能冲突?怎么办?
- WordPress 不想用 CDN 了,如何替换回服务器本地图片?
- WordPress 使用 CDN 之后,为什么小程序上图片不显示,网站上小图标变成方格?
- WordPress 本地删除图片,CDN 上会同时删除图片吗?
- WordPress 使用 CDN 之后,整个页面乱了,是什么问题呢?
- WordPress 使用 CDN 之后,为什么图片不显示或部分没有被替换成 CDN 域名
- 设置好 WordPress 的「CDN 加速」功能之后,怎么判断站点成功加速了?
- 还在使用 TimThumb 裁剪图片的 WordPress 主题?赶快换了!
- WordPress 「CDN 加速」功能为什么不直接上传图片到云存储?
- WordPress「CDN 加速」功能背后原理揭秘:对象存储的镜像回源功能详细介绍