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 加速」功能背后原理揭秘：对象存储的镜像回源功能详细介绍
