TypeError: Invalid URL on fresh laravel install

[nlsnightmare]

Vite Plugin Version

1.1

Laravel Version

11.31

Node Version

22.13.0

NPM Version

10.9.2

Operating System

Linux

OS Version

6.1.124-1-MANJARO

Web browser and version

Not applicable

Running in Sail?

No

Description

On a fresh laravel installation, I get the following error:

error during build:
TypeError: Invalid URL
    at new URL (node:internal/url:818:25)
    at getAdditionalAllowedHosts (file:///home/maru/Documents/work/offers/node_modules/vite/dist/node/chunks
/dep-BdTvomPN.js:37687:29)
    at resolveConfig (file:///home/maru/Documents/work/offers/node_modules/vite/dist/node/chunks/dep-BdTvomP
N.js:53812:29)
    at async createBuilder (file:///home/maru/Documents/work/offers/node_modules/vite/dist/node/chunks/dep-B
dTvomPN.js:51529:18)
    at async CAC.<anonymous> (file:///home/maru/Documents/work/offers/node_modules/vite/dist/node/cli.js:852
:23)

Steps To Reproduce

Create a fresh laravel project
Run npm install && npm run build

[RobertBoes]

Was just about to create an issue for this, it's because of a security issue that's fixed in Vite; https://github.com/vitejs/vite/blob/v6.0.9/packages/vite/CHANGELOG.md#609-2025-01-20 / vitejs/vite@bd896fb

So it looks like the Laravel plugin either passes an incorrect URL to server.allowedHosts or there's some additional URLs being parsed that aren't correct

[nlsnightmare]

Yeah, I downgraded vite as a temp. workaround. Works for now

[SamBrishes]

Hello,

I had the same issue. Adding server.origin / server.cors to my vite.config.ts file fixed it for me.

My config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/theme.css', 'resources/js/theme.ts'],
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            output: {
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        return 'vendor';
                    }
                }
            }
        }
    },
    server: {
        origin: 'http://localhost:5173',
        cors: true
    }
});

Sincerely,
Sam.

[rafalkrawiec]

From quick debug it seems that laravel plugin initially configures Vite server origin with __laravel_vite_placeholder__ value to be later transformed into a proper dev server URL, and as @RobertBoes suggested, since it's invalid URL it breaks resolving vite config in 5.4.12 version.

Latest working vite version you can downgrade to is 5.4.11, or as @SamBrishes mentions, when you provide server origin in the config with valid URL, it is used instead of placeholder and everything works.

[RobertBoes]

There's no reason to downgrade to Vite 5, as 5.4.12 includes the same fix I think that would also fail. Downgrading to 6.0.8 also resolves the issue for now.

[onlime]

yes, downgrading to v6.0.8 works, or just use v6.0.9 and set server.origin in your vite.config.js (while I didn't get it running with server.allowedHosts):

export default defineConfig({
    server: {
        origin: 'http://localhost:5173',
        cors: true,
    }

If you use some protected Herd/Valet site, you might use something like:

export default defineConfig({
    server: {
        origin: 'https://your-project.test:5173',
        cors: true,
    }

just choose the URL that showed up as Network: <URL> from a previous npm run dev run under Vite < v6.0.9, if you're unsure.

Enabling server.cors is not recommended and not needed. UPDATE: Couldn't get it running without cors: true

[envolute]

Just add the Server config

    server: {
        origin: 'http://localhost',
        cors: true,
    }

Note: I use Herd and it worked for me using only localhost.
This way I don't need to change the URL for each project

[matheuspbmarques]

yes, downgrading to v6.0.8 works, or just use v6.0.9 and set server.origin in your vite.config.js (while I didn't get it running with server.allowedHosts):

export default defineConfig({
server: {
origin: 'http://localhost:5173',
cors: true,
}

If you use some protected Herd/Valet site, you might use something like:

export default defineConfig({
server: {
origin: 'https://your-project.test:5173',
cors: true,
}

just choose the URL that showed up as Network: <URL> from a previous npm run dev run under Vite < v6.0.9, if you're unsure.

Enabling server.cors is not recommended and not needed. UPDATE: Couldn't get it running without cors: true

Downgrading to v6.0.8 dont work to me.

I install latest vite version (6.0.9) and add configuration from SamBrishes

[SmpManeth]

,server: {
        origin: 'http://localhost:5173',
        cors: true
    }

This Worked for me

[diractorhm]

Just add the Server config

    server: {
        origin: 'http://localhost',
        cors: true,
    }

Note: I use Herd and it worked for me using only localhost.
This way I don't need to change the URL for each project

I had to add port :5173 to make it work

[XEQTIONR]

@SmpManeth / @SamBrishes / @diractorhm 's solution works. It's still annoying that I have to do this. Also, whats up with the rollup Config? Where can I get more info about rollUp? I think I saw some kind of rollup error when I tried to install InertiaJS without Breeze.

[lcdss]

These settings worked for me:

server: {
    host: '0.0.0.0', // if you run Vite inside a container and port 5173 must be exposed to host
    origin: 'http://localhost:5173',
    cors: {
      origin: 'https://mydomain.ngrok-free.app', // if you use ngrok
    },
  },

[mikeminckler]

The following has the default cors options listed in the docs https://github.com/expressjs/cors#configuration-options

Which will address the Vite docs saying: We recommend setting a specific value rather than true to avoid exposing the source code to untrusted origins.

    server: {
        origin: 'http://localhost:5173',
        cors: {
            "origin": "http://localhost",
            "methods": "GET,HEAD,PUT,PATCH,POST,DELETE",
            "preflightContinue": false,
            "optionsSuccessStatus": 204
        },
    },

[JeanMichelCot]

I got exactly the same problem. Compltely new to these tools I used the tip given by envolute & diractorhm.
updating my vite config file with:
server:{
origin: 'http://localhost',
cors: true,
}
It works perfectly.

[torgodly]

the solation i found is downgrading

npm install [email protected] --save-dev

hop this will be fixed soon

[timacdonald]

If you are having CORS issues, I've prepared a fix in the laravel-vite-plugin that should resolve the issue for 80% of Laravel apps: #318

If you need special config, we recommend setting the server.cors.origin to the allowed origins. Setting it to true restores the vulnerability that Vite just patched (which is bonkers, btw!).

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
+
+   server: {
+       cors: {
+           origin: 'https://my-app.test'
+       },
+   },
});

I'm holding off merging the fix as it seems the Vite team are working on a similar fix for Vite core. Hopefully that will move quickly.

Alternatively, you can use npx vite --watch and not use hot reloading until we have the fixes out.

Sorry for the troubles here folks.

[timacdonald]

We have released v1.2.0. Please update and let us know if you are still having issues.

[finnjsmith]

I'm still unable to get some vite features working properly using the following dependency versions:

Laravel: 11.39.1
Laravel Vite plugin: 1.2.0
Vite: 6.0.11

When attempting to load a local font:

Access to font at 'http://[::1]:5173/resources/fonts/CervoNeue/cervoneue-bold.woff' from origin 'https://example-app.local' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This is fixed by applying:

server: {
        origin: "http://localhost:5173",
        cors: true,
    },

as suggested above.

I recognise that setting cors: true re-introduces the vite vulnerability, however my project is a multi-site setup across multiple domains, and this is the only way I get it to work across lots of different local domains.

If anyone has any advice / fixes, I'd appreciate it.

[timacdonald]

@finnjsmith, I've noticed you are using the .local domain.

Because this isn't a first-party supported TLD in the Laravel eco-system, you will need to manually allow that domain in the CORS config.

You have two options:

1. If you have a normal Laravel application structure, set the APP_URL in your .env to match your browser domain.

APP_URL=https://example-app.local

2. Manually allow specific hosts in your Vite config:

/* ... */

export default defineConfig({
    plugins: [/* ... */],
    server: {
        // @see https://vite.dev/config/server-options#server-cors
        cors: {
            origin: [
                'https://example-app.local',
                // additional hosts...
            ],
        }
    }
});

Would love to know how you get on.

[timacdonald]

I've created some documentation to help guide anyone with custom setups, e.g., unique TLDs: laravel/docs#10131

[finnjsmith]

@timacdonald thank you for your fast and helpful response. I resorted to using a regex statement for all .local domains with a comment for other devs on the project too:

    server: {
        cors: {
            origin: [
                // See default supported domains: https://laravel.com/docs/11.x/vite#cors
                // Supports: SCHEME://DOMAIN.local[:PORT]
                /^https?:\/\/.*\.local(:\d+)?$/,
            ],
        },
    },

This works great (even with multiple domains), issue is completely resolved 🥳🤝

[spawn81]

Hi excellent work, this upgrade solve the problem while running rpm run dev, but now, if I test : nom run build and then php artisan serve i get the error
Failed to load resource: Origin http://127.0.0.1:8000 is not allowed by Access-Control-Allow-Origin. Status code: 200

in vite.config i have
server: { cors: { origin: [env.VITE_APP_URL, 'http://127.0.0.1:8000'] }, },
thank you for your help

[timacdonald]

@spawn81, please make sure to upgrade to the latest version of Vite and the Laravel Vite plugin. I would then remove your custom server.cors configuration. 127.0.0.1:8000 should work out of the box without any customisation.

[spawn81]

@spawn81, please make sure to upgrade to the latest version of Vite and the Laravel Vite plugin. I would then remove your custom server.cors configuration. 127.0.0.1:8000 should work out of the box without any customisation.
thank you, I've already upgraded to the last version :)

[timacdonald]

Great. Did you also remove your custom CORS configuration?

Are you still hitting the issue?

[spawn81]

Great. Did you also remove your custom CORS configuration?

Are you still hitting the issue?

Yep, I've upgraded the package, removed the fix and everything works out of the box as a charm :)

[timacdonald]

So great to hear!