Requesting images from /storage fails every other time

Support
1

Hey there :slight_smile:

So I’m still in the process of building my VueJS based frontend framework for Cockpit, where you guys here already helped me out some time ago (thanks again :handshake: ), and I’m now stumbling upon something that seems really weird to me.

:information_source: Background

I’ve decided to use Singletons for elements which appear on every page and stay more or less the same. Best examples here being the Footer and the Navbar.
Than there is a Collection called Pages in which I’m creating all of my… Well you’ve guessed it, pages.

The relevant field, of type Layout, in the pages collection is called ‘pagecontent’. In this field I’m maintaining all the contents which should be shown on the according page, such as Headlines, Images and so on.
I’ve also created a custom layout component (using agentejo/LayoutComponents) for creating maps with markers, so companies can show their on site offices for example. This component allows you to select an image which is than being used as marker icon.

And the Singleton which is relevant to explain my problem, which is the navbar singleton, also has a field of type Image which is relevant for showing the Logo in the navbar.

:x: Problem

Let’s imagine that I have an index page which has a navbar and a map. The logo which is used in the navbar is the exact same as the image which was configured to be used as a map marker in the custom map layout component. It’s the exact same file. Uploaded once in Cockpit and than selected for the navbar and the map markers.
This leads to my frontend making two requests for that image in order to display it on my page. So far so easy.

When my navbar loads, I’m seing a request to:
https://COCKPIT/storage/uploads/2021/09/09/logo_191x60.png-3_uid_613a129994ef8.png
I receive status 200 and image shows up as it should. Good.

Now my map loads. Im seing a request to:
https://COCKPIT/storage/uploads/2021/09/09/logo_191x60.png-3_uid_613a129994ef8.png

Déjà-vu.
Except for this time I’m getting a CORS error in my console.
Access to image at ‘https://COCKPIT/storage/uploads/2021/09/09/logo_191x60.png-3_uid_613a129994ef8.png’ from origin ‘http://127.0.0.1’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Okay. So … I know what that Error means. It usually happens when the server behind the requested ressource hasn’t defined what origins are allowed to request data from it. But why the everloving heck does this only happen in one of two cases? The request is exactly the same. I just can’t get my head around this. In my understanding it’s completely irrelevant that the path for the image gets sent to the client from the singleton and than from the collection entry. The file which gets requested, which is the image, is just a file sitting on my Cockpit server in the uploads directory.

:mag_right: Suspections

The only thing I can imagine is that this has something to do with agentejo/LayoutComponents even though I have no idea how that could change the CORS headers of the Server or why it would do that in the first place.

I hope my explanation wasn’t longer than it had to be, but I’m trying my best to explain my problem as good and clear as I can.
Thanks in advance to all the smart people out there who already know what I’m doing wrong here :laughing:

See ya!

2

I think it’s cors prolbem, Maybe both must use Https://

3

I think it’s cors prolbem

Yeah sure it’s a CORS issue, but I don’t get how that can appear if I’m requesting the exact same file twice. If the path of those two photos where different, that might have been easy to fix. But as said. Same path, same file.

Maybe both must use Https://

That’s actually how I’m doing it. The Cockpit host URL is defined in a global const anyways, so it can’t be http in one case and https in the other. Apart from that, I can see that my requests both go to https in the dev tools.

So yeah … I really appreciate your help, but that doesn’t seem to be a new hint.

Wish you all the best.