Sekkison SpringBoot project - 09

ILCHAN AHN·2023년 3월 20일
0

Sekkison

목록 보기
8/13

Sekkison Project

CORS

이때까지 모든 프로젝트는 하나의 프로젝트 안에 백엔드와 프론트엔드를 같이 넣어서 테스트를 진행했었다. 하지만 이번 프로젝트의 취지는 실제 백엔드와 프론트엔드의 협업이 어떤 방식으로 이루어지는지, 백엔드에서 API를 만들어 Response 하였을 떄, 프론트에서 요청을 어떻게 받는지를 알아내기 위한 작업을 목표로 하였다.

SpringBoot로 API를 만든 후, Visual Studio Code에 프론트 페이지를 구축하였다.

어쨰선지 API 요청을 받아들이지 못하고 에러를 뱉고있었다.

CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 실행되는 애플리케이션이 다른 도메인의 자원을 요청하는 메커니즘을 말한다. 보안상의 이유로, 브라우저는 기본적으로 다른 도메인에서 자원을 요청할 수 없다고 한다. 하지만, 이러한 요구사항이 필요한 경우가 많아서 CORS가 등장하였다.

처음보는 에러지만 http 와 https 가 호환되지 않는 것을 말하는 것 같다. webConfig에 Access-Control-Allow-Origin 헤더를 추가하여, 브라우저에게 다른 도메인에서의 요청이 허용되었음을 알려주어야한다는 것을 알게되었다.

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(final CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .maxAge(3000);
    }
}

@Configuration 어노테이션을 사용하여 Spring 설정 클래스임을 나타내고, WebMvcConfigurer 인터페이스를 구현한다.

addCorsMappings() 메서드는 CorsRegistry 인스턴스를 인자로 받습니다. 이 메서드를 통해 CORS를 설정할 수 있습니다.
allowedOrigins("*")은 모든 도메인에서의 요청을 허용하겠다는 것을 말한다. 다시 말해 모든 URL에 대해 CORS를 허용하도록 설정한 것이다.

profile
백엔드 개발자를 꿈꿉니다

0개의 댓글