1. 我设置了 CDN 之后，为什么我小程序上图片不显示了？
2. 我使用 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配置」设置，添加一条规则：

本站使用的是火山引擎的veImageX图片服务功能。

具体看使用哪家的cos操作修改就可以啦。