HTTPS + CORS for backend and client localhost but different ports and firefox | NestJS | Page 1

#

Hi all ! My life has been nightmare since a few days with firefox and CORS. Hope you can help. I'll do my best to describe the issue I have.

I have a nest backend and a SvelteKit client (that is in SPA mode, it runs no server code)
I used to use the ServerStaticModule to serve my SPA frontend/client, so my front was server on the same address and port as the back.
I would run cd frontend && vite build && cd .. && nest build to start the project.
But in order to benefit from vite dev server that rebuilds my frontend instantly, I have had to set up some kind of CORS.

nest start runs nest on https:localhost:3000
vite runs vite dev server on https:localhost:5173

src/main.ts

async function bootstrap() {
    const app = await NestFactory.create(AppModule, {
        httpsOptions:
        {
            key: fs.readFileSync('./secrets/key.pem'),
            cert: fs.readFileSync('./secrets/cert.pem'),
        },
        cors:
        {
            // origin: true
            origin: ['https://localhost:5173'], // I thought setting it explicitly could solve the issue
            credentials: true,
        }
    });
//...
}

In my frontend, all my fetch request are from those two wrapper functions:
frontend/src/lib/global.ts

export async function fetchGet(apiEndPoint: string) {
    return fetch(PUBLIC_BACKEND_URL + apiEndPoint, {
        mode: "cors",
        credentials: "include",
    })
}

export async function fetchPostJSON(apiEndPoint: string, jsBody: Object) {
    let body = JSON.stringify(jsBody)
    let headers = {
        "Content-Type": "application/json",
    }
    //         http://localhost:3000
    return fetch(PUBLIC_BACKEND_URL + apiEndPoint, {
        mode: "cors",
        credentials: "include",
        method: "POST",
        headers,
        body,
    }
    )
}

Now in firefox here I get the first screenshot
Anything I can do ?

#

I have tried to the same thing in safe mode and the problem remains
To get to the safe mode I went to about:profiles and chose the option to restart with addons disabled

#

I have also tried to "refresh" firefox with Troubleshoot mode

#

This is the header of the failing preflight request

#

#

The Security tab tells me :

#

So it seems the preflight request has an issue with my self-signed certificate

#

But Chromium does not

#

Chromium is totally fine with all of it

#

The whole code is available here : https://github.com/ninofaivre/transcendence

#HTTPS + CORS for backend and client localhost but different ports and firefox