BlaxKnight's avatar

CORS Issue

Hi, I got problem during loading my website and i noticed this is a CORS Error that prevents css and js to load.

I changed vite configuration and almost tried everything but still on the same boat then I found a extension to prevent this error ( temporarily ) to see then finally I successfully load those files ( again temporarily ).

Note: The Website host in my computer, it is a linux vm ( debian ) port forwarded 8000 ( laravel ) , 5173 ( vite ); I also checked if firewall cause blocking port or something but it was not issue after tested with "no more CORS Error" extension. ( The idea is to self-host my website which was successful but not after went to newer laravel and work with vite server ).

Note: There is no CORS Error in local.

I am sorry, I am just a novice programmer, I never got this error of course because i never use vite before with laravel ( or any programming languages or frameworks ). Thank you :)

0 likes
10 replies
experimentor's avatar

I'm not sure about your setup. But my guess is that you are running npm run dev in the host machine and accessing the website from another machine.

You could try this: npm run build on host machine. This will build your production assets for JS and CSS. php artisan serve on host machine.

Now everything will be served from the same server and cors is avoided.

Hope this works for you.

BlaxKnight's avatar

@experimentor I just hope it was simple as you said but this is so much annoying and stuck more than 2 days.

Back then, I never used vite ( just laravel to include assets ) but I see this is something new and I thought it would be good to use it for my projects.

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import path from "path";

export default defineConfig({
  server: {
    hmr: {
      host: "localhost",
    },
  },
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: true,
    }),
  ],
});

When i use npm run dev after npm run build it will show this ( which means i successfully run vite server locally and globally ).

  VITE v5.4.0  ready in 260 ms

  ➜  Local:   ...
  ➜  Network: ...
  ➜  press h + enter to show help

  LARAVEL v11.20.0  plugin v1.0.5

  ➜  APP_URL: ...

Note: I use php 8.2.

BlaxKnight's avatar

I am so sorry for not sending the error and saying exact details about the situation.

The problem is behind in hmr, when i put the domain address or ip, it will request to server that exact host name ( rathar than it should be dynamic that client load the server ). For example I want to load website with another domain but it just load what EXACTLY I put in host: "0.0.0.0".

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://0.0.0.0:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).

Now if I load website locally it will shows CORS Error because it is not pointed to domain name ( or ip address )

But don't understand it why, because if i don't put anything in host: "localhost" and instead use npm run dev -- --host to run vite server without saying what the hostname is, it shows this CORS Error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://[::]:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).

So the only thing I can do is to when i wanted to use it globally ( through internet ) i should put my domain name or public ip otherwise i should localhost to switch server to local computers to load website assets.

I am truly sorry if I misunderstood what is happening.

BlaxKnight's avatar

Does that mean I should change vite config for production use because in laravel it is not a problem when I wanted to change project codes while port forwarded online.

Is it a bad way to run your projects this way?

ArthurYdalgo's avatar

I had this problem on two different projects and I discovered that when using

  • "vite": "^4.0.0"
  • "laravel-vite-plugin": "^0.7.8"
  • "@ vitejs/plugin-react": "^3.1" (I put a space there so it wouldn't mention the laracast user "vitejs")

in my package.json, sometimes vite would be bumped up to a version higher than 4.5.5 when installing another package, which would start causing the issue. any other 4.x version after that one would trigger the issue... I just noticed that 4.5.6 was release jan 20th 2025 (16 days ago at the time of writing).

two possible fixes (both worked for me, but I went for the second one):

1 - keep "vite" at "4.5.5" in your package.json

2 - update "vite" to "^6.0" in your package.json

additionally, you might need to change at least those two packages I mentioned above. I updated them to:

  • "laravel-vite-plugin": "^1.2",
  • "@ vitejs/plugin-react": "^4.3" (I put a space there so it wouldn't mention the laracast user "vitejs")

edit: additional notes: you might to delete your package-lock.json and/or your node_modules directory before attempting another "npm install" to get the new versions

1 like
Medboubazine's avatar

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

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

Please or to participate in this conversation.