[개발&이슈] React - SpringBoot : CORS 문제

1. 오류 발생

진행중인 프로젝트 개발에서 프론트는 ReactJS, 백은 Springboot 를 사용하며 진행하고 있었다.

나는 프론트 인원중 한명으로 UI 구현을 전부 마치고 데이터파싱을 위해 백엔드 서버와 통신하여 데이터를 교환하려고 시도했다. 

즉, 다른 호스트에서 클라이언트와 서버가 각각 돌아가고 있었다.

그런데....!

이게뭐람....?

CORS 문제가 일어났다...

 

그다음에 드는 생각은...

CORS 가 뭐지?

2. 쓰던 방식에 대한 고찰

쓰던 방식을 코드로 적으려면 너무 길어지니 간단하게 

React에서 axios와 async - await를  이용해 데이터를 받아올때까지 기다리고  Promise 객체를 반환받는 과정이다.

그럼 CORS는 뭘까?

브라우저에서는 보안적인 이유로 cross-origin HTTP 요청들을 제한한다.

그래서 cross-origin 요청을 하려면 서버의 동의가 필요한데 만약 서버가 동의한다면 브라우저에서는 요청을 허락하고, 동의하지 않는다면 브라우저에서 거절한다.

이러한 허락을 구하고 거절하는 메커니즘을 HTTP-header를 이용해서 가능한데, 이를 CORS(Cross-Origin Resource Sharing)라고 부른다.

그래서 브라우저에서 cross-origin 요청을 안전하게 할 수 있도록 하는 메커니즘이다.

cross-origin

cross-origin이란 다음 중 한 가지라도 다른 경우를 말한다.

1. 프로토콜 - http와 https는 프로토콜이 다르다.
2. 도메인 - domain.com과 other-domain.com은 다르다.
3. 포트 번호 - 8080포트와 3000포트는 다르다.

3. 이제 문제를 해결해보자!

방금 기술한 CORS내용처럼 cross-origin을 하려면 "서버의 동의"가 필요하다

그래서 순간

백엔드 코드에 내 request를 허용하고 있는 코드가 있나?

라고 생각했고

 

그 생각은 정답이었다. 내 요청을 허용하는 코드가 없었다.

해답을 찾은 개발자.jpg

 

git으로 프로젝트 관리를 하고 있었기에 git clone을 해서 내 로컬에 받아오고

WebConfig에서 Cross-origin 허용이 이뤄진다.

 

위의 사진과같이 config 패키지를 만들고 WebConfig.java 클래스를 만들었다. 

아래는 WebConfig.java의 코드이다.

 

package SDM.springmvc.basic.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer{
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

 

이 클래스를 추가한채 서버를 다시 구동시켰고 그 결과로!!!!!

백엔드형의 카리나 사랑.jpg 가 아니라 통신성공

 

데이터를 잘 받아온 모습이다!!

4. 깨달음

CORS 문제 === "서버의 미동의" 였다.

 

5. 더 나아가...

CORS가 뭔지는 알았는데 어떻게 동작하는지 정확히는 모르겠다.

다음에는 CORS의 동작에 관해서 적어봐야겠다!!