strapi从4.11.5等旧版本升级到4.13以后的最新版报Uncaught TypeError: Failed to construct ‘URL‘: Invalid URL的问题解决

文章目录

    • 问题描述
    • 问题解决

问题描述

我用的是strapi4.11.5升级到4.13.3后,当点击后台的媒体库时,在chrome等浏览器中报错了:Uncaught TypeError: Failed to construct 'URL': Invalid URL

strapi从4.11.5等旧版本升级到4.13以后的最新版报Uncaught TypeError: Failed to construct ‘URL‘: Invalid URL的问题解决_第1张图片

Firefox中,则报:TypeError: URL constructor: /uploads/thumbnail_images_7d4ec4cb5f.jpg is not a valid URL.

而且页面空白。

问题解决

查看了strapigithub仓库的issue,发现其实是从4.13.2版本就有这个问题了。

起初我以为是因为我开启了production生产环境导致的(strapi start),其实不是,开发环境(strapi develop)也一样有问题,也不是有没有sharp依赖包的问题。(所以package.json中的sharp依赖包可以删除了)

问题解决貌似有两种方法:

1、删除数据库对应的files表,重建该表

2、修改代码–我用的是这种

找到项目根目录/node_modules/@strapi/plugin-upload/admin/src/utils/appendSearchParamsToUrl.js

//strapi/packages/core/upload/admin/src/utils/appendSearchParamsToUrl.js  
//第13行
const urlObj = new URL(url); 


//修改原因:If url is a relative url, the constructor should be const urlObj = new URL(url, baseUrl) or the constructor will raise the exception.
//将其改为
const baseUrl = "https://your.domain.cn"; //这里替换为你当前的strapi站点域名
const urlObj = new URL(url, baseUrl);

//为什么要这么改,请参考:https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#parameters

修改代码后,需要npm run build,然后再npm run startnpm run develop

至此,问题已经被临时性的解决了。期待后续官方能升级新的strapi版本能修复该问题,这样就不需要自己修改以上代码了。

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

你可能感兴趣的:(strapi,headless,无头CMS,strapi)