[SOLVED] HTTPS Application Loading Insecure Font from HTTP Cache Despite Different Configurations

HTTPS Application Loading Insecure Font from HTTP Cache Despite Different Configurations

I have two applications running on the same port (5173). One application uses HTTP and includes a font (YoungSerif-Regular.ttf), and the other uses HTTPS and does not include this font. When I turn off the HTTP application I start the HTTPS I receive the following error:

dvms-server:1 Mixed Content: The page at 'https://192.168.1.97:5173/dvms-server' was loaded over HTTPS, but requested an insecure font 'http://192.168.1.97:5173/src/assets/fonts/young-serif/YoungSerif-Regular.ttf'. This request has been blocked; the content must be served over HTTPS.

I'm pretty sure the HTTPS Application doesn't use the YoungSerif-Regular.ttf font, I try to clear cache all days in Chrome and restart the browser but I'm still get that error, what should I do to resolve error?

NodeJS version: win32-x64 node-v20.13.1
Vite version: vite/5.2.8

This is my vite.config.ts

import react from '@vitejs/plugin-react'
import basicSsl from '@vitejs/plugin-basic-ssl'

export default (mode: string) => {
  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
  return defineConfig({
    plugins: [react(), basicSsl()],  
    server: {
      port: parseInt(process.env.VITE_PORT as string),
      host: true, 
    },
  });
}

Solution

I found a way to fix that error, just delete all browser history.

Go to chrome://settings/clearBrowserData then select time range all time and browser history