[Vue.js] CORS 문제 해결의 건

개인 프로젝트 (" Vue.js + Spring Boot & JPA 를 활용한 주식 종목 관리 게시판 개발 " ) 를 진행하다가 맞닥뜨린 "CORS (Cross-Origin Resource Sharing, 교차 출처 자원 공유) 문제" 를 해결한 과정을 정리한 글이다.
 
1. 정의
  - 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조
 
2. 현황
  - Client 단에서 Server 단으로 HTTP 요청 (GET, POST 등) 을 하는데 CORS 문제가 발생
  - Client Env.
    > Vue.js 3 Version
    > URL: http://localhost:3000
  - Server Env.
    > SpringBoot 2.6.7 & Java 11
    > URL: http://localhost:8080
  
3. 해결 방법
  - Client
    > 1) vue.config.js 파일 에서 아래와 같이 설정

const { defineConfig } = require('@vue/cli-service')

module.exports = defineconfig ({
    outputDir: "../src/main/resources/static",
    devServer: {
    	port: 3000,
        host: "localhost",
        proxy: {
        	'/api': {
            	// '/api' 로 들어오면 포트 8080 (스프링 서버) 로 보낸다.
                target: 'http://localhost:8080',
                changeOrigin: true, // crossOrigin 허용
                secure: false
        }
    },
    transpileDependencies: true,
    lintOnSave: false
});

    > 2) axios instance 생성할 때 다음과 같이 설정

import axios from "axios";

export const http = axios.create({
    baseURL: process.env.VUE_APP_API_URL, (http://localhost:8080 을 전역 변수로 저장하고 사용)
    headers: {
    	'Accept': 'application/json',
        'Content-Type': 'application/json;charset=utf-8',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Credentials': true,
    },
    timeout: 1000 * 180,
});

    이렇게 설정하였으나, 여전히 CORS 문제는 해결되지 않았다. 그래서 Server 단에도 문제 해결을 위한 소스를 추가하였다.
  - Server
    > 1) WebConfig 파일에서 아래와 같이 method 추가

@Configuration
public class WebConfig implements WebMvcConfigurer {
	// CORS 관련 설정
    @Override
    public void addCorsMappings(CorsRegistry registry) {
    	registry.addMapping("/**")
                .allowedOrigins("*") // 원하는 보안 수준에 맞게 변경하면 된다.
                .allowedMethods("*")
                .maxAge(3000);
    }
}

    그랬더니 문제가 해결되고 Client 단과 Server 단 간의 HTTP 통신이 원활하게 되었다!

 

    + 경우에 따라, addCorsMappings 함수 안에 allowedOrigins("*") 로 설정한 부분을 비활성화 및

       allowedOriginPatterns("*") 및 allowCredentials(true) 를 추가해야 하는 경우도 발생했다.