CORS policy blocks CSS and JS from vite server using Laragon

Hey, have you solved this yet?

Hello, yes, but sadly without knowing what was failing. I updated to a different version of node and NPM. Then it worked. What bothers me the most is that after doing some NPM package updates it stoped working again. Did the same, switched to different NPM version and it was fine again...

I'm up against the exact same issue, when running HTTPS using Laragon. Only when the using the HMR does CORS block the assets, because they are being served from a different origin, localhost:5173. (when you run build, it's fine b/c the assets are within the same origin)

I'm still searching for a solution, seems that similar issues have been encountered by those using Sail/Docker/WSL setups on Windows.

If i figure this out, i'll post it here!

my vite.config.js

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

const host = 'myapp.test';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js',],
            refresh: true,
        }),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        }
    ],
    server: {
        host,
        hmr:{ host },
        https: {
            key: fs.readFileSync('C:/laragon/etc/ssl/laragon.key'),
            cert: fs.readFileSync('C:/laragon/etc/ssl/laragon.crt'),
        }
    },
});

Just a quick follow up, the above setup broke the very next day. I found that there was more pieces to the puzzle. Note:

• This may just be needed for Laragon users; I dont know about WSL/Sail/Docker setups.
• The setup below only seems to work in Firefox. I haven't figured out Chrome, which is throwing an incompatible ssl key usage error.

Turns out the ASSET_URL environment variable is not needed at all

my vite.config.js now looks like this

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,
        }),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    });
                }
            },
        }
    ],
    server: {
        https: {
            key: 'C:/laragon/etc/ssl/laragon.key',
            cert: 'C:/laragon/etc/ssl/laragon.crt',
        },
    },

});

Then, load the page and confirm the security warning (this is because laragon's SSL cert is self-signed). At this point the page loads , but the assets don't. Looking at the console, there are CORS errors regarding the HMR vite client server at- https://127.0.0.1:5173

So, if you load the vite client url into the browser in a new tab - https://127.0.0.1:5173/@vite/client You should see the same security warning, confirm it and the laravel/vite page is now allowed to load. Now you can go back to your development domain and reload it and it load, and HMR should work.

Note: if you clear you browser cache, you will have to confirm the security exceptions again for both the dev url & the vite client url

If, I figure out a workaround for chrome I'll post it here.

Thanks @colbyalbo for picking up the topic. However, I am not entirely sure that the ultimate cause is being addressed. Why do I say this? It is because I have the app working on 2 different PCs (both with Laragon) without any HTTPS configuration. Actually, my vite.config.js is still as it was in the opening post and with this config I have had working and non-working setups in the past. We maybe see two different problems with the same sympthoms or maybe something out of our knowledge is affecting the behaviour.

It is very nice though, that your config works and I will replicate it if my setup breaks again.

I did a fair bit bit soul-searching when I came up against this error. For what it's worth, the CORS error turned out to be a total distraction from the actual cause of the problem. Can't speak for everyone's individual configs of course, but at least in my case the issue was a symptom of the problem rather than a useful indication of the cause. I eventually discovered that an update in an npm asset dependency was the source of the problem. I had to import some SCSS files in a different order.

Make sure you tune up your logging options to help you debug better!!

Sometimes it is just APP_URL= in the .env file. It is solving, when you add the URL with the https.

You can add a header "Access-Control-Allow-Origin" to your vite.config.js

export default defineConfig({
	//...Configs
    server: {
        //....
		headers: {
        	'Access-Control-Allow-Origin': '*',
        },
    },
});