Couch Coding ( 카우치 코딩 ) - Frontend에서 CORS 해결하기 ..

문제의 시작  ☠️

로그인, 회원가입을 위해 FIrebase로 Google oAuth를 연결하고 Firebase 내에 토큰을 가지고 백엔드 서버에 로그인, 회원가입

요청을 보내야 했었다. 

 

안 되더라 ..

 

🚨 Access to fetch at ‘https://api.lubycon.com/me’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

 

CORS ..?

 

눈치없냐 ...?

 

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.

- https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

 

뭐라는 거지 ? 🤷‍♂️

쉽게 말해서 

 

http://waitwait.com:80/page/main.html 

 

위와 같은 URL이 있다고 가정해 보자 이때 어떤 것이 동일 출처인지 보고 쉽게 이해해보자 !

 

예시 URL	동일출처	이유
http://waitwait.com/dir/main.html	⭕️	경로만 다르기 때문
http://waitwait.com:80/search/main.html	⭕️	경로만 다르기 때문
https://waitwait.com:80/page/main.html	❌	프로토콜이 다름
http://waitwait.com:85/page/main.html	❌	포트 번호가 다름
http://gogo.com:80/page/main.html	❌	호스트 다름

 

 

CORS 해결 방법 🎁

 

예전에 개인 프로젝트를 진행할 때에 공공 데이터를 받아오기 위해 Proxy server를 이용해 CORS를 해결한 적이 있는데 

이번엔 백엔드 서버가 있는데 다른 서버를 중간에 둬도 되는건가 ..? 

 

여러가지 혼란이 오고갔다 

튜터님께 해결방법을 질문드렸고 몇가지 해결책을 제시해주었다 .

 

 

첫번째  해결 방법 package.json 프록시 환경설정 

 

create-react-app

공식문서 https://create-react-app.dev/docs/proxying-api-requests-in-development

 

 

package.json 에 proxy 라는 코드를 추가한다 

 

"proxy": "http://api-server:8080"

 

api-server의 자리에는 요청하고자 하는 URL을 넣으면 되겠다 !

 

이 방법으로 다시 로그인 요청을 보냈을 때 

성공했다 ! 

 

그리고 다음날 

 

갑자기 안 된다 ... 왜지 ? 

 

이 글을 보는 분들은 문제가 없다면 계속 위 방법을 써도 무방하다. 

 

하지만 나는 다른 방법으로 갈아타야 할듯 싶었다 .. 

 

 

두번째  해결 방법  http-proxy-middleware

 

npm install --save-dev http-proxy-middleware

 

http-proxy-middleware 라이브러리를 설치하자 

 

우선 src 폴더 내에 아래 사진과 같이  setupProxy.js 파일을 만들어 준다 

 

 

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/members', {
      target: '"proxy": "http://api-server:8080"',
      changeOrigin: true,
    }),
  );
};

 

setupProxy 파일을 생성하고 위 코드와 같이 작성해 보자. 

 

http://localhost:3000/members 로 시작하는 모든 요청들을 moddleware가 

http://api-server:8080/members 으로 프록싱 해주게 된다 ! 

 

위 방법을 사용하여 결국 로그인에 성공했다 ...... 😂

 

 

---

위 방법 외에 다른 사람이 만든 프록시 서버를 이용하는 방법도 있지만 

그 방법은 프록시 서버를 만든 사람이 서버를 닫아 버리면 CORS 문제가 다시 발생해버리는 경우가 있어서 추천하지 않는다 ...

( 내 경험담 이다)

 

이렇게 프론트엔드 개발자라면 누구나 한번 쯤 경험해 봤을 CORS라는 녀석과 한판 승부를 벌였는데 

겨우 해결해서 기분이 정말 행복했다. .. 편안 😇