nginx) react(spa) reverse-proxy를 이용해 cors에러 해결하기

 

1) 서버에 있는 nginx 디렉토리로 이동

 

제 기준으로는 etc/nginx 디렉토리에 있습니다.

cd etc/nginx

 

 

 

2) conf 파일 열기

 

환경마다 conf 파일이 다릅니다.

 

cd ./site-enabled

vi default

 

 

3)  reverse_proxy 셋팅하기

 

제 환경에서는

react(spa) 프로젝트에서 

 

백엔드로 요청시 요청 주소 제일 앞에

api가 붙는 경우 백엔드 주소로 요청하는 걸로 되어있습니다. 

 

ex)

1) 아래처럼 요청
axios.post('/api/board', 파라미터); 

2) 실제 요청 주소는 아래와 같이 바뀌어서 요청됨
axios.post('백엔드주소/board', 파라미터); 

 

---

 

nginx conf 파일을 아래와 같이 수정

 

        
        #일반 요청시 react router를 타도록 함
        location / {
                try_files $uri $uri/ =404;
                index index.html index.htm;
        }



		#api가 앞에 붙는다면 백엔드 주소로 보냄
        #/api/board 일 경우, 백엔드주소/board 로 요청감
        location /api/ {
                proxy_pass http://백엔드주소/;
        }

 

4) nginx 재시작

sudo service nginx restart

 

 

---

 

react 로컬로 돌릴 때

package.json에 있는

proxy 설정은 배포 때 필요없다. 

 

로컬에서는

node 서버에서 

proxy 설정을 보고 알아서 reverse_proxy를 돌려주는 듯 함

 

배포시엔

서버가 없고 index.html 밖에 없음

 

따라서 

pakage.json의 proxy설정은 제거해도 됨