Vite over HTTPS Started server but not loading

Hello There is a strange problem I have this is not issue when it is over HTTP. I generate key and cert files from let's encrypt for my domain to use it over HTTPS with a valid ssl certification, now vite server cannot load assets because of this and I guess it is because of vite server not running over HTTPS so I considered to setup vite server over HTTPS; I use the same key and cert files from /etc/letsencrypt/live/.../privkey.pem and also fullchain.pem.

I run vite server with permission in terminal ( linux server ).

Everything is fine, I can see localhost:5173 vite page that means the server running.

But nothing loaded and uhh god again got an error, again it is a CORS Error!

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
  server: {
    https: {
      key: '/etc/letsencrypt/live/THE_DOMAIN/privkey.pem',
      cert: '/etc/letsencrypt/live/THE_DOMAIN/fullchain.pem',
    },
    hmr: {
      host: "localhost",
    },
  },
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: true,
    }),
  ],
});

Also if you use routes in laravel you will get a 404 error:

GET https://192.168.1.9/app [HTTP/1.1 404 Not Found 0ms]

Note: I am running my server in local and it is completely fine over HTTP. Thank You :)