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

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

  1. 我设置了 CDN 之后,为什么我小程序上图片不显示了?
  2. 我使用 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 

©我爱水煮鱼,本站推荐使用的主机:阿里云,国外主机建议使用BlueHost

本站长期承接 WordPress 优化建站业务,请联系微信:「chenduopapa」。