Vite and docker setup CORS problems and The connection was reset

[tomelsj]

Hello, I am trying to host vite in a php-apache container, but I cannot access it in the browser. The web console gives the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).. if I try to access http://localhost:5173/resources/js/app.js in the browser, it will just show me "The connection was reset". I am not sure if I normally should be able to directly access the javascript output, but it is the only way I can think of to debug it.

As for the docker container, I simply use docker-compose with the 5173:5173 and 80:80 ports exposed. The Dockerfile has some additional configuration to install node. The most vital part is probably the vite configuration file vite.config.js which is set up like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            port: 5173,
            clientPort: 5173,
            host: 'localhost'
        }
    }
});

I tried several different configurations, but none works. What I have left to do is to setup a node container directly, just in case something in the apache server blocks access to vite. Something else I could try?

[tomelsj]

Alright, I got it working by setting host: true, remove ports from the hmr section, adding

watch: {
    usePolling: true
},

and change the port to 8000

[nthnyvllflrs]

Can you post a copy of your vite.config.js, I am having the same issue currently, thank you.

[fakeman2332]

Fixed this by

    server: {
        host: 'node', // node container in docker
        origin: 'http://localhost:5173', // exposed node container address
    },

[alexfierro]

This was my issue! I am using docker so I needed to add the host and origin to my vite config and then it immediately worked, no issues.

[AlexanderSuvorovN]

In case you are using HTTPS:

server: {
host: "domain-php-apache", // container name
port: 5173, // the port you're using for Vite
https: {
key: fs.readFileSync('/etc/ssl/private/domain.local.key'), // Path to your SSL key
cert: fs.readFileSync('/etc/ssl/certs/domain.local.crt'), // Path to your SSL certificate
},
origin: "https://domain.local:5173",
},

[cyrus-za]

In case someone else runs into this, I fixed mine by switching host to 0.0.0.0 when running in docker

server: {
    port: 3000,
    host: '0.0.0.0',
  },

[AlexanderSuvorovN]

server.origin is still required, otherwise CORS won't work.