我之前在使用Strapi结合Azure存储和CDN时，也碰到过一模一样的问题——图片能通过URL直接访问，但后台预览就是不出来。结合你的环境版本，大概率是这几个原因导致的，给你整理了排查和修复步骤：

1. 检查Strapi上传配置中的CDN地址是否正确 #

Strapi后台的预览组件需要正确读取CDN的地址，如果你没在配置里指定cdnUrl，它可能还是用Azure存储的原始Blob地址，而后台的预览逻辑可能无法正确解析这个地址。

打开config/plugins.js，确保上传配置里的cdnUrl已经正确设置为你的CDN端点：

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "strapi-provider-upload-azure-storage",
      providerOptions: {
        account: env("AZURE_STORAGE_ACCOUNT"),
        accountKey: env("AZURE_STORAGE_ACCOUNT_KEY"),
        containerName: env("AZURE_STORAGE_CONTAINER_NAME"),
        cdnUrl: env("AZURE_CDN_URL"), // 比如 https://your-cdn-endpoint.azureedge.net
        defaultPath: "",
        maxConcurrent: 10,
      },
    },
  },
});

设置完成后重启Strapi，重新上传一张图片测试预览。

2. 检查Azure存储容器的CORS配置 #

虽然图片能直接访问，但Strapi后台的域名可能不在Azure存储的CORS允许列表里，浏览器会因为跨域问题阻止预览请求。

在Azure Portal操作：

• 找到你的存储账户，进入资源共享 (CORS) 选项
• 为Blob服务添加一条规则：
  • 允许的来源：填入你的Strapi后台域名（比如开发环境的http://localhost:1337，生产环境的实际域名），也可以暂时用*测试
  • 允许的方法：勾选GET和OPTIONS
  • 允许的头部：填*
  • 暴露的头部：填*
  • 最大年龄(秒)：设为3600
    保存配置后，刷新Strapi后台再试预览。

3. 排查插件版本兼容性问题 #

你用的strapi-provider-upload-azure-storage v2.0.0和Strapi v4.1.3可能存在适配问题。

• 先查看这个插件的npm文档，确认它支持的Strapi版本范围
• 如果版本不兼容，尝试升级插件到最新的稳定版（比如执行npm install strapi-provider-upload-azure-storage@latest），或者回退到明确支持Strapi v4.1.3的版本
• 同时确保@azure/storage-blob依赖的版本和插件要求匹配，避免依赖冲突

4. 检查CDN的路径映射和缓存 #

如果CDN设置了路径重写规则，可能导致Strapi生成的预览路径和CDN实际的文件路径不匹配：

• 检查CDN的端点配置，确保Azure存储容器的路径和CDN的路径是一一对应的（比如存储里的/uploads/xxx.jpg对应CDN的/uploads/xxx.jpg）
• 清空CDN的缓存，避免旧的错误路径被缓存导致预览异常

额外排查步骤 #

如果以上方法都没用，打开浏览器的开发者工具：

• 切换到网络标签，刷新预览页面，查看图片请求的状态码（比如403、404）
• 如果是跨域错误，回到CORS配置检查；如果是404，核对预览图片的URL和实际CDN上的文件路径是否一致

内容的提问来源于stack exchange，提问作者PerryMoss