Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

stderr33's avatar

Request Blocked: The Same Origin Policy disallows reading the remote resource

I'm facing this issue with Vite dev server with using docker. While the build command works, the dev server is not and instead it shows this error:

Request Blocked: The Same Origin Policy disallows reading the remote resource.

I tried updating the vite config file but it seems to not work. Here's my docker-compose file:

version: '3.8'

services:
  nginx:
    build:
      context: .
      dockerfile: nginx.dockerfile
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - ./src:/var/www/html
    depends_on:
      - postgres
      - php
      
  postgres:
    image: postgres:alpine3.18
    ports:
      - '5432:5432'
    environment:
      POSTGRES_DB: larave
      POSTGRES_USER: root
      POSTGRES_PASSWORD: secret
    volumes:
      - ./pgsql:/var/lib/postgresql/data

  php:
    build:
      context: .
      dockerfile: php.dockerfile
    volumes:
      - ./src:/var/www/html

  composer:
    build:
      context: .
      dockerfile: composer.dockerfile
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html

  npm:
    image: node:current-alpine
    volumes:
      - ./src:/var/www/html
    entrypoint: ["npm"]
    working_dir: /var/www/html
    ports:
      - '5173:5173'

  artisan:
    build:
      context: .
      dockerfile: php.dockerfile
    volumes:
      - ./src:/var/www/html
    working_dir: /var/www/html
    depends_on:
      - postgres
    entrypoint: ["php", "/var/www/html/artisan"]

and here's my Vite config file:

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

export default defineConfig({
    server: {
        https: false,
        host: true,
        hmr: {host: 'localhost', protocol: 'ws'},
    },
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    includeAbsolute: false,
                },
            },
        }),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

I also added this header to the website config file of Nginx:

    add_header Access-Control-Allow-Origin localhost:5173;

But it seems that it has no effect. Any help?

0 likes
0 replies

Please or to participate in this conversation.