WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图1
WordPress果酱
「WordPress果酱」是一个关注 WordPress 开发和分享的专业技术公众号,为广大 WordPress 爱好者提供了大量关于 WordPress 的主题、插件、代码以及相关的建站经验分享。
395篇原创内容
公众号

我们继续来解答 WPJAM Basic 插件「CDN 加速」功能的常见问题,今天是关于图片防盗链和资源跨域的问题。

  1. 我设置 CDN 之后,为什么我小程序上图片不显示了?

  2. 我使用 CDN 之后,为什么网站上的小图标显示成空方格?

小程序上图片不显示?

这是因为很多用户为了节约费用,防止图片被人盗链,在云存储上给图片设置了防盗链,只给自己的博客域名使用。而小程序是通过 API 接口和前端的交互,请求图片的 Referer 不是你的 WordPress 站点,自然不显示了。

所以解决方法有两个,最简单的就是关闭防盗链,如果想要设置防止其他站点盗链我们的图片的同时,又要能给自己的小程序使用,那么怎么办呢?

经过我的研究,微信小程序展示的图片的 Referer 是空或者https://servicewechat.com,所以我们只要在云存储上防盗链设置开启「空 Referer」,并加上https://servicewechat.com即可。

下面讲讲在具体云存储是怎么设置的:

阿里云 OSS 防盗链设置:

选择要设置的 bucket 之后,选择「权限管理」-「防盗链」:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图3

开启「空 referer」,Referer 除了自己站点之外,加上https://servicewechat.com

腾讯云 COS 防盗链设置:

选择要设置的存储桶之后,选择「安全管理」-「防盗链设置」:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图5

类型选择「白名单」,空 referer 选择「允许」,Referer 除了自己站点之外,加上servicewechat.com

火山引擎 veImageX 防盗链设置:

火山引擎 veImageX 的防盗链设置有点深,首先选择要设置的服务,点击「基础配置」,然后再「域名信息」中要设置的 CDN 域名,点击「配置」,最后编辑「防盗链」设置:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图7

类型选择「referer白名单」,包含空referer开启,规则:输入域名和servicewechat.com,注意 veImageX 使用;分割多个域名。

小图标显示成空方格?

首先说明一下,这些小图标不是图片,而是图标字体,所以这是因为当前 WordPress 的主题是使用了字体图标造成的 CORS 资源跨域问题。

WPJAM Basic 对静态资源进行 CDN 加速之后,如果 CSS 里面使用了一些字体文件,字体文件也会镜像到 OSS。这时打开浏览器的开发者中心,如果在控制台出现下面的错误信息:No Access-Control-Allow-Origin header is present on the requested resource。

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图9

这是跨域资源共享 (CORS) 机制造成的,该机制使用附加的 HTTP 头来告诉浏览器,是否允许运行在一个源上的 Web 应用访问位于另一不同源的资源,当一个 Web 应用发起一个与自身所在源(域,协议和端口)不同的 HTTP 请求时,它发起这个 HTTP 请求的即跨源 HTTP 请求

知道什么问题就知道怎么去解决了,最简单的就是不要镜像 CSS 文件,这样就不会镜像字体文件,就不会有跨域的问题,如果还是希望静态文件都做 CDN 加速,那么只需在 CDN 设置一下字体文件允许跨域访问,下面讲讲在具体云存储是怎么设置的:

阿里云 CDN 跨域设置:

登录阿里云 CDN (不是 OSS)控制台,在域名管理页面,选择需要配置的域名,点击「缓存配置」 > 「自定义HTTP响应头」,单击添加:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图11

自定义响应头参数选择「Access-Control-Allow-Origin」,取值请根据现场环境而定,如果不清楚直接输入 * 即可。

腾讯云 COS 跨域设置:

登录腾讯云 COS(不是 CDN,每个平台不一样)后台,选择要设置的存储通之后,点击「安全管理」-「跨域访问CORS设置」,添加规则:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图13

来源 Origin 输入自己博客的域名,操作 Methods 全选或者按照上图输入,其他也可以按照上图输入,最后保存即可。

火山引擎 veImageX 跨域设置:

火山引擎 veImageX 的跨域设置和防盗链设置一样,首先选择要设置的服务,点击「基础配置」,然后再「域名信息」中要设置的 CDN 域名,点击「配置」,最后编辑「HTTP Header配置」设置,添加一条规则:

WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?插图15

WPJAM Basic 插件的「CDN 加速」功能都有完整使用说明,如果还有其他问题,建议先看使用说明:

WordPress 博客使用阿里云对象存储 OSS 进行静态资源 CDN 加速

WordPress 博客使用腾讯云对象存储 COS 进行静态资源 CDN 加速

WordPress 博客使用火山引擎 veImageX 进行静态资源 CDN 加速

最后老是老规矩,贴一下 WPJAM Basic 支持的云存储服务,记得复制我的链接去注册,这三家土豪会给佣金的,我有钱赚了,就能够更加专注更新和优化插件了。🤩

云服务链接
阿里云OSShttps://wpjam.com/go/aliyun
腾讯云COShttps://wpjam.com/go/qcloud
火山引擎veImageXhttps://wpjam.com/go/volc-imagex

最后互动环节:你在使用 WPJAM Basic 有什么问题,或者有什么功能需求,请给我留言


原创文章 WordPress使用CDN之后,为什么小程序上图片不显示,网站上小图标变成方格?,版权所有
如若转载,请注明出处:https://www.itxiaozhan.cn/20222160.html

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注