[React]CORS 에러

캡스톤 프로젝트를 진행하면서 마주했던 에러 중 하나는 CORS 에러였다. 처음 백엔드 팀원분들과 연동을 시도했을 때  CORS 에러가 발생하여 조금 고생했다 히히 ~ 🥹😢

 

📖CORS(Cross Origin Resource Sharing, 교차 출처 리소스 공유)

CORS란 다른 출처(origin) 간 리소스를 공유가능하도록 하는 매커니즘이다. CORS는 다른 출처의 자원의 공유를 가능하게 만들며, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려준다. 이때, CORS에러란 브라우저가 보안 정책 중 하나인 SOP 정책을 따르기 때문에 발생한다. 

 

🔎SOP(Same Origin Policy, 동일 출처 정책)

브라우저는 보안 정책 중 하나인 SOP 정책을 따른다. SOP란 동일한 출처(Origin) 사이에서만 데이터를 주고 받을 수 있도록 하는 정책이다. 이때, 동일한 출처의 기준은 프로토콜, 도메인, 포트이다.

예를 들어, http://localhost:8000과 http://localhost:8000/posts는 같은 출처이기 때문에 상호작용이 가능한데, http://stonesy.com에서 http://localhost:8000을 호출하는 것은 SOP에 위배된다.

브라우저가 SOP 정책을 따르는 이유는 XSS, CSRF 공격을 방지하기 위해서이다. XSS(Cross-Site Scripting) 공격이란 공격자가 웹 사이트에 악의적인 스크립트를 삽입해서 중요한 정보를 탈취하거나 다른 웹 사이트로 리다이렉션시키는 공격이다. CSRF(Cross-Site Request Foregery, 사이트간 요청 위조 공격) 공격이란 인증된 사용자가 웹 애플리케이션에 특정 요청을 보내도록 유도하는 공격이다.

 

 

 

로컬에서 개발 중인 React(http://localhost:3000)에서 Spring(http://localhost:8080)으로 요청을 보냈을 때 다음과 같이 cors 에러가 발생하는 것을 확인할 수 있다.

 

그렇다면 CORS 에러는 어떻게 해결해야할까?

 

🔎CORS 에러의 해결방법

1.access-control-allow-origin 헤더

기본적으로 백엔드에서 access-control-allow-origin 헤더를 통해 SOP 정책을 완화할 수 있다. 이는 가장 일반적으로 사용되는 방법으로, access-control-allow-origin 헤더를 통해 특정 출처나 모든 출처에서의 접근을 허용할 수 있다.

 

2. 프록시 서버

프론트엔드에서 프록시 서버를 두어 CORS 에러를 우회할 수 있다. 이는 개발 단계에서 유용하며, 실제 운영 단계에서는 이를 제거하거나 수정해야 한다.

 

3. Fetch API mode 옵션

• cors: 모든 요청이 CORS 정책을 준수하도록 한다. 서버가 올바른 CORS 헤더(access-control-allow-origin)을 반환해야 요청이 성공한다.
• no-cors: 모든 요청이 CORS 정책을 무시하다록 한다. 이 모드는 다른 출처간 리소스 교환에서도 브라우저가 CORS 에러를 발생시키지 않고 처리하지만 응답에 접근하는 것은 제한될 수 있다.
• same-origin: 요청이 동일 출처에서만 제한되도록 한다.

 

🔎React에 적용

1. http-proxy-middleware 사용하기

먼저 http-proxy-middleware를 설치해야 한다. npm이나 yarn을 이용해 http-proxy-middleware를 설치한다.

npm install http-proxy-middleware
yarn add http-proxy-middleware

./src 폴더에 setupProxy.js 파일 생성하한다. 중요한 점은 typescript로 개발하고 있더라도 setupProxy파일은 js로 생성해야 한다. 2021년 7월 14일 기준으로 Typescript template CRA는 http-proxy-middleware를 지원하지 않는다고 한다.(참고: https://egas.tistory.com/39) 현재는 어떤지 모르겠는데, 실제로 테스트해보았을 때 setupProxy를 ts로 생성하니까 에러가 해결되지 않았다.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

 

target에는 api 요청 주소를 작성한다. changeOrigin을 통해 호스트 헤더가 변경된다. 위 코드의 의미는 "http://localhost:3000/api"로 시작되는 요청을 "http://localhost:8080/api"로 프록싱되게 하라는 의미이다.

import React, { useEffect } from 'react';
import axios from 'axios';

function App() {
  useEffect(() => {
    axios.get('/api/hello')
      .then(res => {
        if (res.status === 200) {
          console.log(res.data);
        }
      })
      .catch(error => {
        console.log(error);
      });
  });

  return (
    <div>
      Hello
    </div>
  );
}

export default App;

참고로 axios로 요청을 보낼 때는 "http://localhost:8080~"를 모두 작성하는 것이 아닌 엔드포인트만 작성해야 한다.

해결!

 

2. package.json 수정하기

 

3. spring에 설정 파일 추가하기

react측에서 해결하는 방법은 아니지만 백엔드에서 다음 파일을 추가하여 해결할 수 있다. 우리는 실제로 이 방법을 통해 문제를 해결했었다 ㅎㅎ ~

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 implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

 

하지만 위 방법들은 개발 단계에서만 사용 가능하다. 

예를 들어, netfliy를 통해 배포한다고 했을 때 https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service를 참고하면..

최상위 폴더에 netlify.toml이라는 파일을 생성하고 다음과 같이 작성한다.

[[redirects]]
from = "/api/*"
to = "http://localhost:8080/:splat"
status = 200

이때, :splat의 의미는 *과 동일하다.

어쨌든 중요한 점은 위에 설명한 방법들은 로컬 환경에서 개발할 때만 적용되는 방법인 것 같다.

 

 

🔎출처

https://www.datoybi.com/http-proxy-middleware/#:~:text=CORS%20Error%EB%8A%94%20Server%EC%97%90%EC%84%9C,%EB%A5%BC%20%EC%84%B8%ED%8C%85%ED%95%B4%EC%A3%BC%EB%A9%B4%20%ED%95%B4%EA%B2%B0%EB%90%A9%EB%8B%88%EB%8B%A4.