[React] CORS-Policy 해결하기

CORS(Cross-Origin Resource Sharing)는 브라우저에서 받아오는 리소스가 안전한지 확인하는 기술이다.

이번에 다양한 API로 간단한 프로젝트를 여러개 진행 하다보면서 CORS-Policy 에러를 자주 마주치게 되었는데,

그 때 마다 여러가지 방법을 시도 해보고 그 중에서 효과가 있었던 방법 몇가지를 포스팅 하려고 한다.

 

로컬 환경에서의 해결 방법

로컬 환경에서는 proxy만 설정해주면 간단하게 해결할 수 있다.

 

CRA 프로젝트의 경우 package.json에서 위와 같이 proxy를 설정하면 된다.

//package.json
"proxy":"https://api.myproxy.com/",

하지만 위와 같이 설정하게 되면 설정한 proxy 외의 다른 API를 호출하기에는 무리가 있었다. 그래서 두번째 방법을 사용했다.

 

http-proxy-middleware를 사용하는 방법이 있다.

이를 사용하기 위해선 설치를 해주어야 한다.

npm i http-proxy-middleware

이렇게 설치를 한 뒤 src 폴더 내부에 setupProxy.js를 생성해준다.

그리고 내부에 아래와 같이 작성한다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){
  app.use(
      createProxyMiddleware('/api', { //api 경로(path)
          target: 'https://localhost:4000/', //proxy 서버 주소
          changeOrigin: true
      })
  )
};

 

배포 뒤에 발생하는 CORS-Policy 해결 방법

로컬에선 proxy만 설정해주면 문제없이 프로젝트를 진행할 순 있었지만, 완성한 뒤 heroku에 배포를 한 뒤가 문제였다.

proxy는 로컬에서만 사용하기 때문에 배포를 하게 되면 다른 방법을 사용해야 하는데 가장 쉽고 다음에도 바로 사용할 수 있는 방법이 있다.

 

CORS Anywhere

Proxy된 요청에 CORS Header를 추가해주는 Node.js Proxy다. MIT License로 자유롭게 사용할 수 있다.

 

Repository fork하기.

https://github.com/Rob--W/cors-anywhere

위 Repository로 들어가서 fork 해준다.

 

Heroku에 배포

 

위와 같이 GitHub에 연결하고 배포한다.

 

사용하기

사용방법은 엄청 간단하다.

호출하는 api 주소 앞에 배포했던 heroku 주소를 넣어주면 된다.

https://my-proxy.herokuapp.com/https://api.example.com/

 

이렇게 한 번 배포한 뒤 두고두고 사용하면 로컬에서도, 배포 후에도 CORS 를 만나지 않아도 된다.