[TIL] 2022-1013

🐈오늘 배운 것

✔️Proxy

개발시에 서버쪽으로 요청을 보낼 때, 브라우저와 api 서버의 출처가 달라 발생하는 CORS 에러를 해결하기 위해 Proxy 우회를 사용할 수 있다. 기본적으로 브라우저가 "우리 같은 출처에 있어😊" 하고 착각하게 만든 다음에 요청하는 것이다. 

 

여기서 다시 복습... CORS 는 왜 발생하는가? CORS 란 Cross-Origin Resource Sharing의 약자로, 출처가 다를 때 리소스를 공유할 수 있도록 허용해주는 것을 말한다. 브라우저는 기본적으로 출처가 다를 경우(여기서 출처는 스킴(프로토콜), 호스트(도메인), 포트 이렇게 3가지를 포함하는 URL 이다) 리소스를 공유하지 못하도록 막는 SOP (동일 출처 정책) 때문에 별도의 권한 허용 없이는 다른 URL 끼리 요청을 주고받을 수 없다. 이런 정책이 있는 이유는 모든 출처에서 접근할 수 있다면 보안상 이슈가 생길 수 있기 때문이다. 

 

개발 단계에서 발생하는 CORS 에러를 해결하려면, 정석적인 방법으로는 서버에서 CORS 권한을 허용하면 되지만(HTTP 응답 헤더에 허용할 출처를 기입하면 된다. Access-Control-Allow-Origon) Proxy는 서버쪽에서 허용해주는 방법 이외에 프론트엔드에서 CORS 를 해결할 수 있는 방법이다. 

개발 단계에서 서버의 url 이 localhost:30001/api/users/me 인데 요청을 하는 브라우저의 url 이 localhost:3000 이기 때문에 CORS 정책에 위반되어 블락한다는 에러메시지가 출력되었다.

이 문제를 Proxy 우회로 해결할 수 있는 방법은 (CRA, 리액트에서) 2가지가 있다.

 

webpack dev server proxy

CRA로 만든 프로젝트에서 package.json 안에 proxy 값을 설정하여 적용할 수 있다. 이 속성에 우회할 api 주소를 설정하면 브라우저에서 요청시 현재 출처로 요청하는 것이 아니라, 명시된 우회 주소로 요청하게 된다. 현재 우리는 동일한 출처에 있어서, 같은 출처에서 요청하는 것처럼 만들 수 있는 것이다.

// package.json
"proxy" : "http://localhost:3001"  //우회할 api주소

// 요청 주소에서 도메인을 제외한 나머지 path만 입력한다.
fetch('/api/users/me').then(...)

 

http-proxy-middleware 사용하기

webpack dev server proxy 방식이 전역으로 영향을 주기 때문에, 여러 출처로 요청을 보낸다면 라이브러리를 사용해 수동으로 proxy 설정을 할 수도 있다.

npm install http-proxy-middleware

위와 같이 설치한 후 src안에 setupProxy 파일을 생성한다. 그리고 아래와 같이 작성한다.

// 미들웨어를 import 한다.
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    ['/api','/api2'],
    createProxyMiddleware({
      target: 'http://localhost:3080',
      changeOrigin: true,
      router: {
        '/api2': 'http://localhost:3070'
      }
    })
  );
};

🐈더 공부할 것

1. 포도마켓 페이지 작업 마무리하기

🐈오늘의 느낀 점

1. 개발시 서버와 클라이언트의 출처가 달라 발생할 수 있는 CORS 에러를 PROXY 로 우회하는 방법을 연습했다. 

2. 몸이 안좋아서 일정 대부분을 소화하지 못했다. 푹 쉬고 내일부터는 다시 달려야지 ㅜㅜ