[React / Spring] CORS 이슈 해결하기

CORS 이슈란?

CORS(Cross-Origin Resource Sharing)는 클라이언트와 서버의 포트가 다른 상태에서 클라이언트 측에서 서버 측으로 무언가를 요청했을 때 브라우저가 보안상의 이유로 요청을 차단하는 문제입니다.

가령 클라이언트 측의 포트가 3000이고 서버 측의 포트가 8000이라면 보안상의 이유로 차단됩니다.

 

웹개발시에 빈번하게 발생하는 에러로, 아래와같이 웹 브라우저에서 ajax, axios 등을 사용해 도메인의 서버에 url(Data)를 호출할 경우 나타내는 보안문제를 말합니다.

 

 

 

SOP이란?

Same-origin policy의 줄임말로 같은 Origin에만 요청을 보낼 수 있게 제한하는 보안 정책을 말합니다.
Orgin의 구성은 다음과 같습니다.

• URL Schema (Ex. http, https)
• Hostname (Ex. localhost, google.com)
• Port (EX. 80, 8080)

이 중 하나라도 다르면 SOP 정책에 위반되어 AJAX 요청이 불가합니다.

 

CORS 이슈 해결방법

• 서버측에서 크로스도메인을 허용하여 문제를 해결하는 방식
• 클라이언트측에서 크로스도메인을 해결하는 방식 
  (서버측에서 크로스도메인 설정하여 문제를 해결하는 것이 표준화된 방법이라고 하네요.)

 

CORS 이슈 해결 1.Spring

@CrossOrigin 어노테이션을 사용하여 간단히 해결할 수 있습니다. 

 

 

CORS 이슈 해결 2. React 

http-proxy-middleware를 사용하여 모듈을 설치해 사용할 수 있습니다.

 

 npm i http-proxy-middleware 를 통해 설치한 뒤, 

/src/setupProxy.js 파일을 생성해 다음과 같이 입력합니다.

 

import { createProxyMiddleware } from 'http-proxy-middleware';

export default function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: "http://localhost:8080",
            changeOrigin: true,
        })

    );
};

그 뒤에는 기본적으로 axios 호출을 하듯 사용할 수 있습니다.

 

 

 

다만, 두 방식 다 사용해보니 spring(백엔드)에서 고치는게 훨씬 빠르긴 한거같네요.

 

 

참고

https://oopsys.tistory.com/266 - spring

https://doqtqu.tistory.com/232 - react

https://cbw1030.tistory.com/267 - react