[React] CORS 에러 해결하기 (http-proxy-middleware)

외주 작업 도중 api에 요청을 할 때 CORS 에러를 마주하였다!

대략 위와 같은 에러 메세지를 콘솔창에서 볼 수 있다.

 

1. CORS (Cross Origin Resource Sharing)

 

1) CORS란?

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS/Errors

 

CORS(교차 출처 리소스 공유)는 다른 출처 간의 자원 공유를 가능하게 하고

http 헤더를 이용하여

실행 중인 웹 애플리케이션이 다른 출처(Origin)의 자원에 접근할 수 있는 권한을 부여하도록

브라우저에 알려주는 체제이다.

 

 

2) SOP (Same Origin Policy)

https://developer.mozilla.org/ko/docs/Web/Security/Same-origin_policy

CORS 에러가 발생하는 이유를 알아보기 전에 먼저 SOP에 대해서 알아보자.

 

SOP(동일 출처 정책)는 같은 출처(Origin)에서만 리소스를 공유하는 규칙을 가진 정책이다.

이 정책을 이용하여 외부의 허가되지 않은 요청을 방어할 수 있다.

 

여기에서 동일 출처란 어떤 것을 말하는 것일까?

 

위의 URL에서 protocol, host, port 가 같은 경우 동일 출처이다.

 

이 SOP에 반하여 다른 출처의 리소스가 필요한 경우 CORS를 이용하는 것이다.

 

 

3) CORS 에러

CORS 에러는 클라이언트에서 서버(API)에 접근하여 리소스를 받아올 때

만약 동일 출처가 아닐 경우 CORS Error를 반환한다.

 

이놈잉..? (유명한 CORS 밈🥹)

 

이 문제를 서버 차원에서 해결하려면

CORS 미들웨어를 사용하거나, Access-access-control-allow-origin 헤더를 세팅해주어야한다.

 

만약, 서버를 직접 수정할 수 없는 상황이거나 타 API를 사용하는 경우

클라이언트에서 처리를 해주어야 합니다.

이 상황이 현재 내가 마주한 것이다!

 

 

2. React에서 CORS 에러 해결하기

https://create-react-app.dev/docs/proxying-api-requests-in-development/

(공식 문서)

 

클라이언트에서 CORS 에러를 해결하기 위해서는 프록시 서버를 이용해야한다.

(프록시 서버 == 다른 네트워크에 간접 접속할 수 있게 해주는 서버)

 

즉, 프록시 서버를 통해 리소스를 가져올 서버와 동일 출처로 만드는 것이다.

 

이를 위한 방법은 2가지가 존재한다.

 

1) package.json에 proxy 추가하기

//package.json
{
  ...
  "proxy": "원하는 서버(api)주소"
}

 

위와 같이 package.json을 수정하면

 

axios를 통한 response를 할 때 localhost:3000을 등록한 주소로 변경한다.

 

하지만 이 방법은 하나의 api 주소에서만 가능하므로

여러 api를 활용하고 싶을 때는 적절하지 않다.

 

2) http-proxy-middleware 라이브러리 활용하기

(1) 라이브러리 설치

npm install http-proxy-middleware

 

(2) src/setupProxy.js 생성 및 세팅

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/경로1', {
      target: '원하는 주소',
      changeOrigin: true,
    }),
  );
  
    app.use(
    createProxyMiddleware('/경로2', {
      target: '원하는 주소',
      changeOrigin: true,
    }),
  );

  ...
  
};

① createProxyMiddleware ('/경로', { ... }) :  '/경로' 로 시작하는 endpoint를 가진 api를 매칭시킨다.

    (endpoint == 같은 URL에서 서로 다른 요청을 하도록 구별하게 해주는 것)

 

② target : url의 endpoint 들을 제외한 출처 (즉, 가장 base url)

 

③ changeOrigin : 호스트 헤더의 출처를 target으로 바꿀 것인지 여부 (true로 해야 함!)

 

(3) App.js에서 요청

 

// App.js


//POST 요청일 경우 예시

//클릭 이벤트 관련 함수 등
const handleSubmit = async (event)=>{
  event.preventDefault(); 

  axios.post('/경로1', //setupProxy.js에 추가한 endpoint이어야 함
  {
    // 요청에 담을 것 추가
  },{withCredentials : true})
  .then((res)=>{
    console.log(res);
  })
  .catch((error)=>{
    console.log(error);alert("ERROR");
  })
  
  ... 

}
  
  

//GET 요청일 경우 예시
{
  ...
  
  async function fetchdata() {
    const { data } = await axios.get(
      '/경로2',
    );
    console.log(data);
    
  ... 
}

 

위와 같이 POST, GET 요청을 App.js에서 정의한다.

 

 

끝!

 

 

예시 ▼

예시) 로그인 POST

//App.js
const LoginForm = () =>{
  const [values, setValues] = useState({
    loginId: "",
    password: "",
  });

  const [error, setError] = useState(undefined);

  const handleSubmit = async (event)=>{
    event.preventDefault();

    axios.post("/login", 
    {
      loginId: values.loginId,
      password: values.password,
    },{withCredentials : true})
    .then((res)=>{
      console.log(res);
    })
    .catch((error)=>{
      console.log(error);alert("ERROR");
    })
  };

  return(
    <div className="login-page-container">
      <form onSubmit={handleSubmit}>
        <div className="field">
          <label htmlFor="loginId">아이디</label>
          <input
            type="text" name='loginId'
            onChange={(e)=>setValues({...values, loginId: e.target.value})}
            value={values.loginId}
          />
        </div>
        <div className="field">
          <label htmlFor="password">비밀번호</label>
          <input
            type="password" name='password'
            onChange={(e)=>setValues({...values, password: e.target.value})}
            value={values.password}
          />
        </div>
        {error ? <p className='error'>{error}</p> : <p></p>}
        <button type='submit' className='loginBtn'>로그인</button>
        <button>회원가입</button>
      </form>
      
    </div>
  );
}

 

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

module.exports = function(app){
  app.use(
    createProxyMiddleware('/login',{
      target:"https://www.kassid.net",
      changeOrigin: true,
    })
  )
};