로그인/회원가입 - #16 CORS 이슈, Proxy 설정

CORS 이슈

axios통신과 함께 났던 CORS관련 이슈를 해결하고자 한다.
우선 에러가 난 이유는 서버의 포트는 5000이고 클라이언트는 3000이다. 서로가 다른 주소를 가지고있기때문에 통신을하는데 제한이 걸린다. 가장 큰 이유는 보안때문에다. Cross Origin Resouce Sharing의 줄임말이며 이름 그대로 크로스된 오리진의 리소스를 공유하는 설정이 잘 되어있지 않다는것이다.

그럼 이것을 어떻게 해결하는가 한다면,
서버쪽에서 해결할 수 있는방법은 우선 CORS라는 모듈을 다운받는다.
그리고 아래와 같이 cors의 origin을 client로 잡아주면 해당 client에서 오는 Request는 허용이 된다.

const express = require('express');
const app = express();
const cors = require('cors');

app.use(cors({
  origin: client의 url,
  credentials: true, 
}));

또 다른 방법으로는 Proxy를 이용하는 방법이 있다.

Proxy Server

Proxy를 설정하여 프론트에서 백엔드로 갈때 Proxy를 한번 거쳐서 가게된다.

아이피를 Proxy Server에서 임의로 바꿔 버릴수 있다.
그래서 인터넷에서는 접근하는 사람의 IP를 알수가 없다.
그리고 보내는 데이터도 임의로 바꿀 수 있다.
기능으로는 방화벽기능, 웹 필터기능, 캐쉬 데이터 등등이 있고,
사용하는 이유는

• 인터넷 사용 제어
• 캐쉬 이용 빠른 인터넷 제공
• 보안 제공
• 이용 제한된 사이트 접근 가능

그럼 이러한걸 이용해 어떻게 CORS이슈를 해결할 수 있을까?
그건 바로 http-proxy-middlewqre를 사용하면 된다.
터미널에서 npm install http-proxy-middleware --save를 이용하여 모듈을 다운받는다.
그런 다음 src폴더 아래에 setupProxy.js파일을 생성한다.
파일 안에는 아래와 같이 작성을 한다.

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

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

위와 같이 프록시를 설정하면 서버에 가기전에 프록시에서 클라이언트의 ip를 변경하여 서버와 같게한다.
그러면 서버에서는 cors이슈가 해결이 된것가 마찬가지다.
(개인적으론 이 방법보다는 개인적으로 위에서 말한 CORS 모듈을 받아 서버쪽에서 origin을 설정하는게 더 좋을것 같다.)
이렇게 Proxy를설정하고 랜딩페이지에서 axios부분에서
http://localhost:5000을 제외한 나머지 endpoint만을 날린다.
이렇게 작성하고 앱을 실행하여 root로 이동했을때

위의 사진처럼 안녕 세상아!가 콘솔에 잘 나오는것을 볼 수 있고, CORS오류는 사라진 것을 볼 수 있다.