blog18 : CORS문제 해결 (server.proxy)

지난 포스팅에선 아래와 같이 작성하여 서버 측에서 CORS문제를 해결하였다.

//WebConfig.java

package com.endofma.blog.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {

    //서버에서 CORS문제를 해결하는 방법
    //frontend에서 Cors문제를 해결하는 실습을 위해 주석처리
//
//    @Override
//    public void addCorsMappings(CorsRegistry registry) {
//        registry.addMapping("/**").allowedOrigins("http://localhost:5173");
//    }
}

이번에는 frontend에서 CORS문제를 해결하기 위해 주석처리 하였다.

https://vitejs.dev/config/server-options.html

Vite

Vue.js에서는 server.proxy를 사용하거나 API를 두어 CORS문제를 해결할 수 있다.

여기서는 server.proxy를 사용한다. 프론트로 요청이 들어왔을 때 설정된 경로로 보내는 역할을 한다.

 

//src/vite.config.ts
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  //CORS 해결을 위해 server.proxy사용
  server: {
    proxy: {
      "/posts": "http://localhost:8080" // /posts로 요청이 들어오면 localhost:8080으로 보낸다
    }
  }
  
});

 

 

<!-- WriteView.vue -->
<script setup lang="ts">
import {ref} from "vue"; //ref를 사용하기 위해 import

// const axios = require('axios').default; 오류발생 :CommonJS형태가 아니기 때문.
import axios from 'axios'// 따라서 이렇게 import

const title = ref("") //입력받은 값을 저장할 변수 선언
const content = ref("") //입력받은 값을 저장할 변수 선언

//WriteView.vue
const write = function() {
  // axios.post("http://localhost:8080/posts",
  axios.post("/posts", //전체 도메인이 아니라 path에 대한 것만 적어야 vite.config.ts에서 프록시 처리 가능.
      //RequestBody
      {
        title: title.value,
        content: content.value
      });
}

</script>

<template>
  <div class="mt-2">
<!--    선언한 title, content 변수를 아래 v-model 태그에 넣는다.-->
    <el-input v-model="title" placeholder="제목을 입력해 주세요"/>
  </div>

  <div class="mt-2">
     <el-input v-model="content" type="textarea" rows="15"></el-input>
  </div>

  <div class="mt-2">
    <el-button type="primary" @click="write()">글 작성 완료</el-button> <!--눌렀을 때 write() 함수 호출 -->
  </div>

</template>

<style>
</style>

 

테스트 시 요청이 이상 없이 전송된다.

 

 

요청 path가 많아지는 경우.

 

 

모든 api에 대해 위처럼 개별로 해주기는 어렵다. 따라서 "/api"로 설정하여 api로 보내는 모든 요청을 중계하도록 한다.

 

*참고: 예제에서는 /api로 해주었지만 실제로는 다른 이름을 해주는 것이 좋다. api는 다른 api 호출에 빈번히 사용하는 용어이므로 실제 경로에 존재할 수도 있기 때문이다. api가 반드시 들어가야 하는 경로가 있다면 api가 ""이 되어버리므로 곤란해질 수 있다.

//vite.config.ts
import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
  //CORS 해결을 위해 server.proxy사용. 또는 vue.config.js에서도 가능
  server: {
    proxy: {
      // "/posts": "http://localhost:8080"
      "/api": { //"/api"로 설정하여 api로 보내는 모든 요청을 중계하도록 한다.
        target : "http://localhost:8080",
        rewrite: (path) => path.replace(/^\/api/, ""),
        //api로 들어온 요청에 대해, api를 ""처리하고 target으로 보내줄 수 있다.
        // api로 들어온 여러 요청을 한 번에 해결할 수 있는 것이다.
      }, 
    },
  },

});

<!-- WriteView.vue -->
<script setup lang="ts">
import {ref} from "vue"; //ref를 사용하기 위해 import

// const axios = require('axios').default; 오류발생 :CommonJS형태가 아니기 때문.
import axios from 'axios'// 따라서 이렇게 import

const title = ref("") //입력받은 값을 저장할 변수 선언
const content = ref("") //입력받은 값을 저장할 변수 선언

//WriteView.vue
const write = function() {
  // axios.post("http://localhost:8080/posts",
  // axios.post("/posts", //전체 도메인이 아니라 path에 대한 것만 적어야 vite.config.ts에서 프록시 처리 가능.
  axios.post("/api/posts", //앞에 /api만 붙여주면 개별 api에 대한 처리를 vite.config.ts에서 해줄 필요 없다.
      //RequestBody
      {
        title: title.value,
        content: content.value
      });
}

</script>

<template>
  <div class="mt-2">
<!--    선언한 title, content 변수를 아래 v-model 태그에 넣는다.-->
    <el-input v-model="title" placeholder="제목을 입력해 주세요"/>
  </div>

  <div class="mt-2">
     <el-input v-model="content" type="textarea" rows="15"></el-input>
  </div>

  <div class="mt-2">
    <el-button type="primary" @click="write()">글 작성 완료</el-button> <!--눌렀을 때 write() 함수 호출 -->
  </div>

</template>

<style>
</style>

 

성공하였다.