Laravel Question posted in
The official Laravel Documentation can be found here.

"Hello" app on Laravel / Homestead with Vue and Vite gives a CORS error in the browser console

Laravel Framework 11.20.0
@vitejs/[email protected]

vite.config.js:

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

 export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/js/app.js', 'resources/css/app.css'],
             refresh: true,
         }),
     ],
 });

app.js:

import { createApp } from 'vue';
 
 const app = createApp({
     data() {
         return {
             message: 'Hello, Vue!'
         }
     },
     template: `
{{ message }}
`
 });

 app.mount('#app');

welcome.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel with Vue</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <div id="app"></div>
</body>
</html>

error:

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

It doesn’t seem like there should be a CORS error for a simple "Hello" app being used to test Laravel together with Vue.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Reference: https://vueschool.io/articles/vuejs-tutorials/the-ultimate-guide-for-using-vue-js-with-laravel/

    composer create-project laravel/laravel example-app
npm install
npm install vue@next vue-router@4 @vitejs/plugin-vue

// gives all the vue versions because vue@next fails:
npm show vue versions --json

// installs vue and vite:
npm install [email protected] vue-router@4 @vitejs/plugin-vue

    // Check your `vite.config.js` file for the output directory:

// vite.config.js
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        vue(),
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],
    build: {
        outDir: 'public/build',
    },
    resolve: {
        alias: {
            vue: "vue/dist/vue.esm-bundler.js",
        },
    },
});

    // resources/js/App.vue
<template>
    <h1>
        VueSchool Rocks! 🤘 
    </h1>
</template>

    // resources/js/app.js
import "./bootstrap";
import { createApp } from "vue";

import App from "./App.vue";

createApp(App).mount("#app");

    // resources/views/welcomeblade.php
<head>
    @vite(['resources/js/app.js'])
</head>

<body>
    <div id="app"></div>
</body>

    // After ensuring the configuration is correct, run the 
following command to generate the manifest file:

npm run build


// Prevents CORS error, allows connecting from outside 
localhost:
npm run dev --host 0.0.0.0

  2. 0

    replace this code in vite.config.js

    // vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import vue from '@vitejs/plugin-vue'


export default defineConfig({
    plugins: [

        vue(),

        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

    and replace this @vite([‘resources/css/app.css’, ‘resources/js/app.js’]) with @vite(‘resources/css/app.css’) in welcome.blade.php then check

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search