I use Laragon for my local development environment, and one of the best things about it is how easily it handles virtual hosts. Just drop a folder inside the www directory, and boom—you get a pretty local URL like http://my-app.test instead of http://localhost:8000. I personally prefer http://my-app.local, but you can use whatever works for you.

Everything was running smoothly until I hit a snag while setting up an Inertia.js app. Inertia relies on a Vite development server to serve front-end assets during local development. But here’s the issue:

👉 Vite serves assets on localhost, while Laragon uses a custom domain.

This mismatch led to CORS (Cross-Origin Resource Sharing) errors, meaning my front-end wouldn’t load properly. No styles, no JavaScript—just a broken app.

Infact, the solution is super simple, and lies in a more often overlooked Vite configuration setting.

The Fix: Telling Vite to Use Your Custom URL

After some digging, I realized the solution is ridiculously simple: just a small tweak in Vite’s configuration.

Here’s what you need to do:

Step 1: Update Your vite.config.ts

Open your vite.config.ts file and add a server entry. Your updated config should look something like this:

import { defineConfig } from 'vite';
import laravel from 'vite-plugin-laravel';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';
import { resolve } from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.tsx'],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
        tailwindcss(),
    ],
    esbuild: {
        jsx: 'automatic',
    },
    resolve: {
        alias: {
            'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
        },
    },
    server: {
        cors: {
            origin: ['http://my-app.local'], // Make sure this matches your Laragon URL
        }
    }
});

Step 2: Restart the Vite Server

npm run dev

And that’s it! Now, Vite serves assets correctly using your Laragon domain, and your app runs without any CORS issues.

Final Thoughts

It’s funny how such a tiny setting can make such a big difference. I initially spent way too long trying to debug this issue, so I hope this post saves you some headaches.

If you run into any trouble, feel free to drop a comment or question. Always happy to help!

Thanks for reading! 🚀