frankgan's avatar

How to disable CORS

Hi, I'm using school public computer to develop my project, so I use the Gitpod to develop it. Now I already run my Laravel project, but the Vite can't accessed by Laravel application (CORS) how can I disable the CORS let my Laravel application can access my Vite Dev Server?

Laravel Application: 8000-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io

Vite: 5173-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io

My vite.config.js:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
    server: {
        hmr: {
            clientPort: 443,
            host: "5173-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io/",
        },
    }
});

The chrome console Error:

Access to script at '5173-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io/:443/resources/js/app.js' from origin '8000-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.```
0 likes
1 reply
frankgan's avatar

I find a resolution! just add the

 server: {
        hmr: {
            clientPort: 80,
            host: "5173-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io",
        },
        origin: "https://5173-xxx-onlineprojec-4bnbd6ifbsg.ws-us110.gitpod.io", // add this line, same with the hmr.host
    }

It work successfully!

Please or to participate in this conversation.