Jun 26, 2023
0
Level 7
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?
Please or to participate in this conversation.