Please open your browser’s console (F12 and console tab) and see what errors you have there. I’m guessing you’ve got some, something along the lines of SSL/mixed content/CORS.
And while I’m picking on your setup, MariaDB is not officially supported. While MariaDB mostly compatible with MySQL, there are enough edge cases, you will eventually find a bug, and possibly a weird and quirky bug that’ll be hard to figure out. If I were setting up a fresh install today, I’d install Node 22 and MySQL. Or take a look at the @tryghost/ghost-docker repo, which is going to be the prefered method going forward with Ghost 6.x. Up to you, of course!
I’m relocating your post over to developer help, because this is a self-hosting setup issue, not a bug.
I’ve now installed Cloudpanel with MySQL 8 and reinstalled my Ghost blog, but I’m still getting these errors.
The comment field isn’t loading and the page remains blank.
I found the following entries under F12 and the console.
Access to fetch at 'https://www.mr-chili.de/members/api/member/' from origin 'https://mr-chili.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
www.mr-chili.de/members/api/member/:1 Failed to load resource: net::ERR_FAILED
App.js:242 [Portal] Failed to initialize: TypeError: Failed to fetch
at o (api.js:31:16)
at Object.sessionData (api.js:198:20)
at Bo.s.init (api.js:582:24)
at h0.fetchApiData (App.js:589:56)
at h0.fetchData (App.js:253:56)
at h0.initSetup (App.js:195:114)
at h0.componentDidMount (App.js:69:14)
at Gy (react-dom.production.min.js:219:411)
at ek (react-dom.production.min.js:259:160)
at e.unstable_runWithPriority (scheduler.production.min.js:18:343)
initSetup @ App.js:242
content-script.js:22 Document already loaded, running initialization immediately
content-script.js:4 Attempting to initialize AdUnit
content-script.js:6 AdUnit initialized successfully
coming-soon/:1 Access to fetch at 'https://www.mr-chili.de/members/api/member/' from origin 'https://mr-chili.de' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
www.mr-chili.de/members/api/member/:1 Failed to load resource: net::ERR_FAILED
App.tsx:184 [Comments] Failed to initialize: TypeError: Failed to fetch
at i (api.ts:31:16)
at Object.sessionData (api.ts:73:24)
at l.init (api.ts:307:24)
at m (App.tsx:167:46)
at App.tsx:197:31
at Array.forEach (<anonymous>)
at IntersectionObserver.root (App.tsx:195:21)
That’s likely the source of everything you’re seeing. Your site is at mr-chili.de (and redirects www to it), but is requesting api access from www.mr-chili.de.
What proxy do you have in front of Ghost? It needs to set the appropriate CORS headers. (To add a little context: Your browser is protecting you from possibly-dangerous javascript by refusing to load content from a different domain than your front end. Your server needs to provide an Access-Control-Allow-Origin header to let the browser know that it’s OK to get content from www or the bare domain. Or you can update your configuration to use the same version of your domain for both the front end and the admin panel.
