DevOps - DevOps에 대해 2 (CORS)

이번엔 CORS 문제를 해결하는 방식에 대해 알아보려고 한다.

우선 백엔드 프로젝트부터 만들자.

controller.CalculatorController

@RestController
@Slf4j
public class CalculatorController {

    private final CalculatorService calculatorService;

    @Autowired
    public CalculatorController(CalculatorService calculatorService) {
        this.calculatorService = calculatorService;
    }

    @GetMapping("/health")
    public String healthCheck() {
        return "I'm alive";
    }

    @GetMapping("/plus")
    public ResponseEntity<CalculatorDTO> plusTwoNumbers(CalculatorDTO calculatorDTO) {
        log.info("plus 핸들러 실행여부 확인" + calculatorDTO);

        int result = calculatorService.plusTwoNumbers(calculatorDTO);

        calculatorDTO.setSum(result);

        return ResponseEntity.ok().body(calculatorDTO);
    }
}

dto.CalculatorDTO

@NoArgsConstructor
@RequiredArgsConstructor
@Getter @Setter
@ToString
public class CalculatorDTO {
    @NonNull
    private int num1;
    @NonNull
    private int num2;
    private int sum;
}

service.CalculatorService

@Service
public class CalculatorService {
    public int plusTwoNumbers(CalculatorDTO calculatorDTO) {
        return calculatorDTO.getNum1() + calculatorDTO.getNum2();
    }
}

resources.application.yml

server:
  port: 7777

즉, 백엔드 서버의 포트는 7777이다.

---

이번엔 Vue 프로젝트를 만들었는데 App.vue에서 만약에 포트를 내 임의대로 바꾸면 어떻게 될까?
App.vue

<template>
  <div class="plus">
    <h1>덧셈 기능 만들기</h1>
    <label>num1: </label><input type="text" v-model="num1">&nbsp;
    <label>num2: </label><input type="text" v-model="num2">&nbsp;
    <button @click="sendPlus">더하기</button>
    <hr>
    <p>`{{ num1 }} + {{ num2 }} = {{  result }}`</p>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const num1 = ref(0);
  const num2 = ref(0);
  const result = ref(0);

  const sendPlus = async() => {
    const response = await fetch(`http://localhost:7777/plus?num1=${num1.value}&num2=${num2.value}`);
    const data = await response.json();
    result.value = data.sum;
  }

</script>

<style scoped>

</style>

CORS 문제처럼 보이지만 SOP에 의해서 우리의 웹브라우저가 막았다는 뜻이다.

Vue에서는 5173 포트지만 현재 백엔드 서버는 7777 포트이다.
임의로 바꿔봤자 SOP 문제로 의해 웹 브라우저에서 막게 되는 것이고 그것을 해결할 방법을 알아볼 것이다.

proxy로 5173번을 7777번으로 바꿔서 백엔드와 연동하는 방법을 첫 번째로 알아보자.

우선 vueProject 에서 vite.config.js 파일로 가서 사진과 같이 바꿔준다.

  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:7777',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 프론트에서 fetch로 날아갈 때 해당 하는 URI는 replace를 ''로 속인다.
      }
    }
  }

이제 위와 같이 target도 지정해줬으니 App.vue에서 response를 만져보자.

App.vue

결과

---

다음은 백엔드에서 처리해주는 방식이다. (이걸 권장하기는 한다.)

Spring 코드로 가서 프로젝트에 추가하자.
config.WebConfig

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:5173")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }
}

그리고 Vue Project의 App.vue에서도 response 부분을 2개 코드 중 윗 라인으로 바꾼 뒤 실행해보자.

결과

잘 되는 것을 알 수 있다.

---

CORS 문제로 어려움을 겪지만 비교적 간단하다.

다음 주는 Docker에 대해 공부해 게시글을 작성할 예정이다.