It looks like you're encountering a CORS issue because Vite is trying to serve your assets from 0.0.0.0:5173, but your Laravel app is being served from a different origin (likely localhost).
To resolve this, you can configure Vite to explicitly set the CORS headers to allow requests from your Laravel app's origin. You can do this by modifying the Vite configuration to include the server property with CORS options.
Here's how you can update your vite.config.js file:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
server: {
host: '0.0.0.0',
port: 5173,
strictPort: true, // if you want Vite to fail if the port is already in use
cors: {
origin: 'http://localhost', // or the specific origin of your Laravel app
credentials: true,
},
hmr: {
host: 'localhost',
},
},
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
Make sure to replace 'http://localhost' with the actual origin of your Laravel app if it's different.
Additionally, since you're running Docker under WSL, you might need to ensure that the ports are correctly mapped and accessible from your Windows host. The 0.0.0.0 IP address in Docker should bind to all interfaces, but you might need to access your services using localhost or the specific IP address of your WSL instance from your browser.
Lastly, ensure that your Docker Compose service for npm (which runs Vite) has the correct port mappings. It looks like you've already mapped port 5173 to the host, which is good.
After making these changes, restart your Vite server and try accessing your app again. If you still encounter issues, double-check that the Vite server is running and accessible from your browser, and that there are no network issues between your Docker containers and your host system.