0songha0

Vue + SpringBoot 프로젝트 외부 접근 방법 / CORS 설정 방법

Vue 프로젝트 외부 접근 허용 설정

vite.config.js 파일 설정 (Vite 사용 시)

export default defineConfig({
  server: {
    host: true, // 추가
    port: 8082,
    cors: true,
    proxy:{
      '/api':{
        target: "http://localhost:8087", // 프론트에서 http://localhost:8082/api/~ 요청 시 http://localhost:8087/api/~ 로 자동 중계 (proxy) 되는 CORS 우회 처리
        secure: false,
      },
    },
  },
});

기본적으로 Vite는 localhost (127.0.0.1) 에서만 접근 가능하도록 띄워집니다.
PC 내부 IP로 Vue 페이지에 접근하려면, 모든 IP 접근도 허용하는 host 설정을 추가해야 합니다.

SpringBoot 프로젝트 외부 접근 허용 설정

CORS 설정 (Cross-Origin Resource Sharing)

package 프로젝트패키지.config;

import org.springframework.beans.factory.annotation.Value;
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 {

  @Value("${allowed-origins}")
  private String[] allowedOrigins;

  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
            .allowedOriginPatterns(allowedOrigins)
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("*")
            .allowCredentials(true);
  }
}

위와 같이, corsConfigurer 메서드를 구현하여 스프링 빈으로 등록하면 CORS 요청이 허용됩니다.
allowedOrigin 또는 allowedOriginPatterns 함수 파라미터로 백엔드에 접근 가능한 도메인 배열을 등록할 수 있습니다.

접근 허용 도메인 목록 정의

allowed-origins: : "http://localhost:8082, http://127.0.0.1:8082, http://10.10.1.87:8082, https://서버도메인.com"

application.yml 파일에 백엔드 접근 가능한 프론트 도메인 목록을 작성할 수 있습니다.
“*“로 설정하면 모든 도메인에서 접근할 수 있는 상태가 됩니다.

최신 글