CORS 오류가 뭔데?

이번 포스트에서는 직접 겪었던 CORS 오류 해결법 및 개념을 간단히 정리해보았다.

1. CORS 개념

CORS는 Cross-Origin Resource Sharing의 약자이다.

웹 브라우저의 보안 정책인 동일 출처 정책(Same-Origin Policy) 때문에 발생한다.

동일 출처란 프로토콜, 도메인, 포트 이 3가지가 모두 같은 경우를 말한다.

CORS 오류는 다른 출처에 있는 자원을 요청할 때, 서버가 허가해주지 않아 발생하는 오류이다.

2. 직면했던 CORS 에러 케이스 및 해결방법

2-1. Swagger 설정 오류

• 문제: EC2 서버에 배포한 Swagger가 HTTPS 대신 HTTP로 API를 호출하는 문제가 발생
• 해결 방법: Swagger 설정 파일에 아래와 같이 내용 추가

@Bean
public OpenAPI openAPI() {
	return new OpenAPI()
        .addServersItem(new io.swagger.v3.oas.models.servers.Server().url("/").description("Same origin"))
}

2-2. 화면 도메인에서 발생하는 CORS 오류

• 문제: 화면 도메인에서 서비스 API를 호출할 때 CORS 오류 발생
• 해결 방법: .properties 파일에 cors.allowed-origins를 추가하여 허용할 도메인을 목록에 포함

# CORS 설정
cors.allowed-origins=[allowed origin url or host here]
cors.allowed-methods=GET,POST,PUT,PATCH,DELETE,OPTIONS
cors.allowed-headers=Authorization,Content-Type,X-Requested-With
cors.allow-credentials=true
cors.max-age=3600

3. 배포 후 설정 확인하기 (feat. Jar 파일)

스프링부트로 배포를 진행할 경우, 서버에 .jar 압축 파일을 직접 풀어 관리하지는 않는다.

그렇다면 배포 후 설정 파일이 잘 적용되었는지 어떻게 확인할 수 있을까?

아래 명령어를 사용하여 .jar 파일 내부에 있는 설정 파일의 위치를 찾고, 그 내용을 직접 읽어 확인할 수 있다.

# jar 파일 안에 설정 파일 위치 확인
jar tvf your-application.jar | grep application.properties
> 명령어로 확인한 파일 위치: BOOT-INF/classes/application.properties

# 설정 파일 내용 확인
unzip -p your-application.jar BOOT-INF/classes/application.properties 

출처

• 🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏