How to Fix HTTPS Issues in Development

Introduction

If you’re developing a Laravel + Vite application and deploying it via HTTPS (like on https://example.com), you might have run into this annoying error:

“Mixed Content: The page at ‘https://example.com/’ was loaded over HTTPS, but requested an insecure script ‘http://0.0.0.0:5173/@vite/client’. This request has been blocked; the content must be served over HTTPS.Understand this error”

Example in console:

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:5173/@vite/client'. This request has been blocked; the content must be served over HTTPS.Understand this error
example.com/:1 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:5173/resources/js/app.tsx'. This request has been blocked; the content must be served over HTTPS.Understand this error
example.com/:1 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:5173/resources/js/pages/welcome.tsx'. This request has been blocked; the content must be served over HTTPS.Understand this error
example.com/:59 Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://0.0.0.0:5173/@react-refresh'. This request has been blocked; the content must be served over HTTPS.

What Is a Mixed Content Error?

During development, Vite runs its own development server (usually on http://localhost:5173) and injects some scripts into your page to enable hot module replacement (HMR).

If your Laravel backend is served over HTTPS, and Vite is served over HTTP, the browser sees this as a security issue — because you’re mixing secure and insecure content.

That’s exactly what causes the Mixed Content warning.

How to Fix this?

To resolve this, you need to align your Vite development server with your Laravel HTTPS setup. This is usually done by editing the vite.config.ts file to tell Vite how it should serve HMR.

In the vite configuration, vite.config.ts, add the following code:

server: {
    host: '0.0.0.0', // Allow external devices to access Vite
    cors: true,
    hmr: {
      host: 'localhost', // or your HTTPS domain if using remote dev
      protocol: 'wss',   // Use WebSocket Secure if needed
    },
  },

Explanation of Each Option

host: '0.0.0.0'

This allows Vite to be accessible from other devices on your network or from your Laravel server running in a Docker container or VM.

cors: true

Enables Cross-Origin Resource Sharing. This is helpful when Laravel and Vite run on different ports/domains.

hmr.host: 'localhost'

This sets the hostname for HMR WebSocket communication. By default, Vite uses the dev server URL (http://localhost:5173). But if your app is served over HTTPS, that reference causes a Mixed Content issue.

Setting this to 'localhost' (or your domain) fixes the mismatch.