라라벨&vue로 Api 통신시 Cors 설정

composer require barryvdh/laravel-cors로 간단하게 설정하는 방법도 있습니다.

 

라라벨10으로 진행하면서 설치에서부터 에러가 발생해서 머리 아프게 만드는 경우도 흔치 않죠.

 

그냥 간단하게 미들웨어 하나 생성하셔서 사용하시는것이 더욱 편하고 관리하기도 좋습니다.

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Accept, Authorization');

        return $response;
    }
}

 

 

이렇게 Cors미들웨어를 생성해주시고



kernel.php 에 미들웨어를 등록 합니다.

 

'cors'=> \App\Http\Middleware\CorsMiddleware::class,

 

 

Route::middleware('cors')->group(function () {
    Route::get('/welcome', function () {
        return response()->json(['message' => 'Welcome to the Shopping Mall API']);
    });
});

 

라우트에 미들웨어를 적용시켜주시면 라라벨에서의 셋팅은 완료입니다.

 

이제 vue에서 axios통신을 설정해줍니다.

 

src/app.js 파일을 하나 생성합니다. 파일명은 관리하시기 쉬운대로 하시면됩니다.

 

import axios from 'axios';

const api = axios.create({
    baseURL: process.env.VUE_APP_API_URL,
    withCredentials: true,
    headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
    },
});

export default api;

 

이렇게 작성을 해주고

vue.config.js에서 포트와 프록시를 설정합니다.

 

반응형

 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 실제 백엔드 서버 주소로 변경
        changeOrigin: true,
      },
    },
  },
})

 

 

view를 하나 생성해서

 

<script setup>
import { ref,onMounted} from "vue";
import api from "@/app";

const welcomeMessage = ref('');

onMounted(async ()=> {
  try {
    const response = await api.get('/welcome');
    welcomeMessage.value = response.data.message;
  } catch(error){
    console.error('Error fetching welcome message:', error)
  }
});

</script>

<template>
  <section class="Welcome">
    <h1>쇼핑몰에 오신걸 환영합니다.</h1>
    <p>{{welcomeMessage}}</p>
  </section>
</template>

<style scoped lang="scss">

</style>

 

라라벨과 뷰를 서버실행후에 접속하시면

welcome문구가 실행되어 집니다.

 

이제부터 Auth,ProductList&Crud같은 기능을 개발해볼수 있습니다.

 

개발공부해볼 다음 주제는

 

MultiAuth (일반유저,사업자유저,관리자)를 공부해보겠습니다.

ProductList & Crud 

이렇게 순차적으로 진행하겠습니다.