Hello everyone,

I have a fresh download of Laravel Sail with docker on wsl2 and when I run 'sail npm run dev' it will not connect to the vite server. I have read all the discussions on this issue here but none of the solutions are helping me.

this the console of my local host

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

Module source URI is not allowed in this document: “https://localhost:5173/@vite/client”. localhost:5:1

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://localhost:5173/resources/js/app.js”. localhost:5:1

this is my docker.yml file

For more information: https://laravel.com/docs/sail

version: '3' services: laravel.test: build: context: ./vendor/laravel/sail/runtimes/8.1 dockerfile: Dockerfile args: WWWGROUP: '${WWWGROUP}' image: sail-8.1/app extra_hosts: - 'host.docker.internal:host-gateway' ports: - '${APP_PORT:-80}:80' - '${VITE_PORT:-5173}:${VITE_PORT:-5173}' environment: WWWUSER: '${WWWUSER}' LARAVEL_SAIL: 1 XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}' XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}' volumes: - '.:/var/www/html' networks: - sail depends_on: - mysql - redis - meilisearch - mailhog - selenium mysql: image: 'mysql/mysql-server:8.0' ports: - '${FORWARD_DB_PORT:-3306}:3306' environment: MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}' MYSQL_ROOT_HOST: "%" MYSQL_DATABASE: '${DB_DATABASE}' MYSQL_USER: '${DB_USERNAME}' MYSQL_PASSWORD: '${DB_PASSWORD}' MYSQL_ALLOW_EMPTY_PASSWORD: 1 volumes: - 'sail-mysql:/var/lib/mysql' - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh' networks: - sail healthcheck: test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"] retries: 3 timeout: 5s redis: image: 'redis:alpine' ports: - '${FORWARD_REDIS_PORT:-6379}:6379' volumes: - 'sail-redis:/data' networks: - sail healthcheck: test: ["CMD", "redis-cli", "ping"] retries: 3 timeout: 5s meilisearch: image: 'getmeili/meilisearch:latest' ports: - '${FORWARD_MEILISEARCH_PORT:-7700}:7700' volumes: - 'sail-meilisearch:/meili_data' networks: - sail healthcheck: test: ["CMD", "wget", "--no-verbose", "--spider", "http://localhost:7700/health"] retries: 3 timeout: 5s mailhog: image: 'mailhog/mailhog:latest' ports: - '${FORWARD_MAILHOG_PORT:-1025}:1025' - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025' networks: - sail selenium: image: 'selenium/standalone-chrome' volumes: - '/dev/shm:/dev/shm' networks: - sail networks: sail: driver: bridge volumes: sail-mysql: driver: local sail-redis: driver: local sail-meilisearch: driver: local

this is my vite config

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

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

and this is the error it gives me

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

Module source URI is not allowed in this document: “https://localhost:5173/@vite/client”. localhost:5:1 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://localhost:5173/resources/js/app.js. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://localhost:5173/resources/js/app.js”. localhost:5:1