Whidy Writes - 我的技术笔记

Strapi的Media Library图片无法正常显示问题

发布于:

在Strapi后台进行媒体库的文件管理时,默认是能够看到图片的预览图的,但是我这里一直都是破图,起初以为是CDN访问限制,配了域名Refer白名单仍旧提示错误,受不了了,这个问题一定要解决!

特别注意,这种问题只存在于第三方Provider服务,如果用内置的服务,图片会存在Strapi的服务器上。

这里涉及到网络安全问题,也是Strapi的默认安全策略做了限制。其实跟CDN无关,而是服务端的配置需要进行调整。默认情况下,服务端的配置在中间件( config/middlewares.js )中修改,而其中需要特别关注的选项就是 Content-Security-Policy 的配置,默认是 false

我正好看到一个Issue:[v4] Media Library shows broken images instead of the good one,也是关于这个的。于是调整了 contentSecurityPolicy 配置,然而并未能完全起作用,不过面板上的错误信息有所调整。变成了403,这下就是CDN的那边返回的错误了。

此时根据自己的CDN安全策略对应调整即可,我这里通过检查分析网络请求的 RequestHeadersResponseHeaders ,查出来原因是 Referer 字段不对。不过Strapi文档中并未把所有配置显示,于是需要查阅helmetjs,最终找到了 referrerPolicy 配置,进行调整,再次刷新页面,一切正常了。

完整的 middleware.js 如下:

module.exports = [ 'strapi::errors', 'strapi::security', 'strapi::cors', 'strapi::poweredBy', 'strapi::logger', 'strapi::query', 'strapi::body', 'strapi::session', 'strapi::favicon', 'strapi::public', { /** * 媒体库上传图片无法显示问题 * https://github.com/strapi/strapi/issues/12595 * https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#security * 官方配置不全面,更多配置需要参考:https://helmetjs.github.io/ */ name: 'strapi::security', config: { contentSecurityPolicy: { useDefaults: true, directives: { 'img-src': ["'self'", 'data:', 'blob:', 'https://statics.whidy.net/'], 'media-src': ["'self'", 'data:', 'blob:', 'https://statics.whidy.net/'], upgradeInsecureRequests: null, }, }, referrerPolicy: { policy: ["origin"], } }, }, ];

因为我这里只用到了图片,故而实际上只需简单配置 img-src 即可。代码中的注释部分,也可参阅一下。

另外补充,非常推荐一款Chrome插件,叫做ModHeader,非常适合测试需要来临时修改请求头等功能。

avatar

Whidy

一名爱折腾的前端开发工程师,喜欢打篮球和分享 ฅʕ•̫͡•ʔฅ