CORS에러 해결 방법 : CRA에서 Proxy 설정하기

 

그동안 CORS에러가 발생하면

백엔드에서 Access-Control-Allow-Origin을 설정해주고,

withCredential 설정을 통해 쿠키 문제를 해결했었다.

 

그런데 프론트에서

(CRA를 사용했다면 pacakge.json에서,

CRA를 사용하지 않았다면 webpack설정에서)

해결할 수 있는 방법이 있었다!

 

그건 Proxy 서버를 설정해주는 것!

 

 

 

CORS가 무엇인지 다시한번 살펴보자.

CORS는 Cross-Origin Resource Sharing으로 

자신의 출저(도메인, 포트, 프로토콜)와 다른 출저의 리소스를 교환할 수 없는

브라우저 보안 정책을 말한다.

 

다른 출처의 리소스를 교환하기 위해서는, 

다른 출저의 리소스를 제공하는 서버쪽에서 CORS 설정을 헤더를 포함한 응답을 해야하야만 한다.

 

또한 출저(도메인, 포트)가 다르면 쿠키를 자동으로 보내주지못한다.

withCredential설정을 true로 설정해주어야한다.

 

 

이 상황은 보통 개발환경에서 프론트 개발서버에서 사용하는 포트와 백엔드서버의 포트가 달라서 발생한다.

 실제 배포 시에는 백엔드서버에 빌드한 리액트앱을 배포하는 것이므로

대부분은 개발환경에서만 발생하는 문제이다.

(만약 프론트서버과 백엔드서버를 따로 두는 경우라면 여전히 문제를 해결해야한다.)

 

그런 의미에서 서버에 불필요한 코드를 작성하는 것보다 Proxy 설정을 하는것이 매력적으로 느껴졌다.

또 배포서버가 바뀔 경우 proxy 설정만 변경해주면 되므로 편리하기도 하다. 😁😁

 

 

 

 

 

프록시는 대리인이라는 뜻인데, 대신 작동하는 가상서버라고 생각하면된다.

 

예를 들어 react dev 서버가 localhost:3000, 백엔드 서버는 localhost:8000이라고 하자.

Proxy 설정을 통해(프록시서버를 localhost:8000으로 설정하자.)

ajax 요청은 자동으로 8000으로 요청을 보내게된다.

 

이렇게 되면 같은 포트로 접속하는 것이기 때문에 CORS도 위반되지 않고, Cookie도 공유한다.

 

 

 

CRA에서 제시하는 Proxy 사용방법은 두가지가 있다.

 

1. Package.json에서 Proxy 설정하기

// package.json
{
	...
    "proxy": "http://localhost:8000"
}

이렇게 설정하고나면 그 전에는

axios.get('http://localhost:8000/api/posts) 라고 적어주던 ajax 요청을

axios.get('/api/posts')라고 간단하게 적을 수 있다. :)

 

 

만약 여러개의 프록시 서버가 필요하다면  객체형태로 넣어주면 된다.

// package.json
{
	...
    "proxy": {
    	"/api": {
        	"target": "http://localhost:8000"
		},
        "/auth": {
        	"target": "http://localhost:8040"
		} 
	}
}

axios.get('/api/posts') 라고 요청하면 'http://localhost:8000/api/posts'로 요청을 보내고,

axios.get('/auth/login')으로 요청하면 'http://localhost:8040/auth/login'으로 요청을 보낸다.

 

 

2. http-proxy-middleware 사용하기

npm 혹은 yarn으로 http-proxy-middleware를 설치한다.

src 하위 폴더에 setupProxy.js 라는 파일을 생성 후 다음과 같은 코드를 작성해준다.

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

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

1버전이상의 경우 위 코드로 작성하면되고

이전버전(v0.x.x)은 아래코드로 작성해야한다.

참고로 현재(2021년 4월 29일) 최신버전은 v.1.3.1이다.

 

난 오늘 http-proxy-middleware를 설치했는데도 왜인지 0.몇 버전이 설치됐다.

그래서 삭제하고 버전까지 명시해서 다시설치함(npm i http-proxy-middleware@1.3.1)

 

이전 버전의 경우 createProxyMiddleware가 아니라 proxy라고 작성해야한다.

// 이전버전(v0.x.x)
const proxy = require('http-proxy-middleware');

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

 

 

 

참조:

Proxying API Requests in Development | Create React App