시작하기 전에
🚨 CORS에 대해 알아보기!
👉 클라이언트 측에서 proxy 서버를 설정하여 CORS 정책을 우회할 수 있다.

⚙️ CRA에서 proxy 설정하는 방법

1. package.json

package.json에서 proxy를 하나만 설정할 수 있고, 여러개 설정할 수도 있다.

// proxy 단일 설정
{
	// ...
    "proxy": "http://localhost:8000"
}

{
	...
    "proxy": {
    	"/api": {
        	"target": "http://localhost:8000"
		},
        "/auth": {
        	"target": "http://localhost:8080"
		} 
	}
}
// http://localhost:3000/api/posts => http://localhost:8000/api/posts
// http://localhost:3000/auth/login => http://localhost:8080/auth/login

2. http-proxy-middleware

설치

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

적용

// src/setupProxy.js

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

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

👉 Proxying API Requests in Development

✅ issue 발생

위 두가지 방법 모두 사용하여 proxy를 설정해보았지만, 제대로 적용이 되지 않은 채 CORS 정책에 막혔다.

열심히 구글링을 한 결과, stack overflow에서 해답을 찾았다. 😂

Stack Overflow - proxy not working for react and node

1. package.json에서 proxy 설정
2. react app 끄기
3. 아래 명령어 차례로 입력

# rm -r package-lock.json
# rm -r node_modules
# npm install

위 방법을 통해 proxy를 설정할 수 있었다!! 다만, node_modules 폴더를 삭제하는 시간이 엄청 오래 걸린다....