CORS(Cross-Origin Resource Sharing) 정책?

개요

새로운 프로젝트에 대해  팀원들과 얘기하던 도중 CORS정책? 에 대해 궁금해졌다

 

결국에 프론트와 백엔드를 서로 다른 애플리케이션으로 서로 다른 포트에서 연결해야하는데 아무런 제약 없이 연결될까?

 

예전부터 몇번 들어봤었지만 나는 스프링부트를 쓰는 백엔드였기 때문에 아직 리액트를 배울 여유까지는 없었기 떄문에  넘어갔었다. 

 

프론트엔드 팀원분이 도와주셔서 프론트(리액트) 와 백(스프링부트)를 연결을 해볼 수 있었다.

 

기본적인 개념은 요청은 언제나 가능하지만(리액트) -> 서버에서 요청이 들어오는 것을 허용해줘야한다 (스프링부트)

 

CORS(Cross-Origin Resource Sharing) 정책은 웹 브라우저에서 웹 애플리케이션이 다른 출처(origin)의 리소스에 접근할 수 있도록 허용하거나 제한하는 보안 기능입니다.

기본적으로, 웹 브라우저는 보안상의 이유로 다른 출처에서 온 리소스에 대한 요청을 제한합니다.

출처는 프로토콜, 도메인, 포트의 조합으로 정의됩니다.

예를 들어, http://localhost:3000과 http://localhost:8080은 다른 출처로 간주됩니다.

 

왜 CORS가 필요한가요?

CORS는 보안상의 이유로 필요합니다. 웹 페이지가 악의적인 스크립트를 포함하여 사용자의 데이터를 유출하거나 조작할 수 있는 가능성을 줄이기 위해, 웹 브라우저는 동일 출처 정책(Same-Origin Policy)을 기본적으로 적용합니다. 이 정책은 한 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근하는 것을 차단합니다. CORS는 이 제한을 적절히 관리하고 필요한 경우 다른 출처에 대한 접근을 허용할 수 있도록 합니다.

 

 

CORS 동작 방식

CORS는 서버가 특정 출처에 대해 요청을 허용하거나 차단할 수 있도록 합니다.

요청이 이루어질 때, 브라우저는 다음과 같은 HTTP 헤더를 사용하여 CORS 정책을 적용합니다.

 

1. Preflight 요청:

• OPTIONS 메소드를 사용하여 서버에 사전 요청을 보냅니다.
• 서버는 클라이언트가 실제 요청을 보내기 전에 이 요청을 처리하여 허용된 출처, 메소드, 헤더 등을 응답합니다.

             Preflight 요청이란?

            클라이언트(React 애플리케이션)가 실제 요청을 보내기 전에, 브라우저는 OPTIONS 메소드를 사용하여 서버에

            "Preflight"요청을 보냅니다. 이는 서버에게 실제 요청을 보낼 때 사용할 메소드, 헤더, 출처 등이 허용되는지 확인하는 과정입니다.

 

2. Actual 요청:

• 서버가 Preflight 요청을 허용하면, 브라우저는 실제 요청을 보냅니다.

3. 응답 헤더:

• 서버는 응답에 Access-Control-Allow-Origin 헤더를 포함하여 클라이언트에 접근을 허용할 출처를 명시합니다.

 

백엔드(스프링부트 설정)

백엔드 서버가 CORS 정책을 설정하여 어떤 클라이언트가 자원에 접근할 수 있는지 결정하기 때문에 백엔드에서 CORS를 설정하면

클라이언트(예: React 애플리케이션)가 요청할 때, 브라우저가 해당 정책을 검사하고 요청을 허용하거나 차단합니다.

 

 

WebConfig.java

import org.springframework.context.annotation.Bean;
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 {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**") // 모든 경로에 대해 CORS 설정
                        .allowedOrigins("http://localhost:5173") // 허용할 출처
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS") // 허용할 HTTP 메소드
                        .allowCredentials(true); // 자격 증명 허용
            }
        };
    }
}

 

소스파일트리

src
└── main
    ├── java
    │   └── us.together.dowee
    │       └── couple ...
    │       ├── DoWeeApplication.java
    │       └── WebConfig.java
    └── resources
        └── application.properties

 

이렇게 설정 해주면 cors문제는 해결된다 ! 

그 후에 생기는 문제는 요청주소가 잘못되었거나 설정변수명이 다르다거나 프론트와 백의 설정 차이에서 오는것이다 

 

백엔드 연습 소스코드가 필요하신 분은 이용하시면 됩니다 

(localhost:8080/couple/create)

https://github.com/HyungGeun94/doWee