Unit 7 - [Deploy] CI/CD - Proxy

2023-08-02(수)

CORS 에러

많은 사람들이 알겠지만 CORS 에러의 근본적인 오류는 "같은 도메인으로부터 요청"을 하지 않았기 때문이다.

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

 

근데 개발을 하다보면 react server에서 db server로 요청을 해야하는데 같은 도메인을 공유하지 않기에 요청을 하면 CORS에러가 뜸
그러면 CORS에러를 어떻게 해결??????

CORS 에러 해결하기

해결방법: proxy 이용하기

Proxy? 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램 (위키피디아 - 프록시 서버)

얻는 장점?

• proxy를 사용하면 다른 도메인으로 요청/응답을 할 수 있으며
• 앞에 주소 없이 상대경로만으로 백앤드 서버에 접속할 수 있음(한 곳에서 관리하기에 나중에 수정이 필요할 때 여러 곳에서 수정할 필요없이 한 파일에서 바로 수정할 수 있음)

첫 번째 방법: package.json에 proxy값 넣기

1. package.json에서 가장 최하단에 아래와 같이 설정

....
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy" : "우회할 API 주소"
}

1. fetch 또는 axios 요청에 원래 있던 도메인 부분 삭제

// 원본
	const response = await fetch('우회할 api주소/params');
    .then(() => {
// 변경
	const response = await fetch('/params');
    .then(() => {

두 번쨰 방법: React Proxy 사용하기

1. npm install http-proxy-middleware --save로 middleware 설치
2. src 파일에서 setupProxy.js를 생성하고 아래와 같이 작성

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

module.exports = function(app) {
  app.use(
    '/proxy가 필요한 path prameter',
    createProxyMiddleware({
      target: '타겟이 되는 api url', 
      changeOrigin: true,
    })
  );
};

// 또는 받아야할 도메인이 2개 이상이면
 app.use(
    ['/path prameter1', '/path prameter2'], // 배열로 생성
    createProxyMiddleware({
      target: '기본적으로 target되는 api url', // 기본적으로 target되는
      changeOrigin: true,
      router: {
        '/path prameter2' : '추가 api url'
        // '/api3' : 도메인으로 추가할 수 있음
      }
    })
  );

1. fetch 또는 axios 요청에 원래 있던 도메인 부분 삭제

// 원본
	const response = await fetch('우회할 api주소/params');
    .then(() => {
// 변경
	const response = await fetch('/params');
    .then(() => {