프록시 설정 HTTP 통신

CORS 정책

만약 다른 도메인에서 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요하다는 것을 여러분 또한 이전 섹션에서 배워 기억하고 계실 것입니다.

CORS
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
웹 콘텐츠의 출처(origin)는 접근할 때 사용하는 URL의 스킴(프로토콜), 호스트(도메인), 포트로 정의됩니다. 두 객체의 스킴, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 말합니다.
일부 작업은 동일 출처 콘텐츠로 제한되나, CORS를 통해 제한을 해제할 수 있습니다

CORS 정책이 생긴 이유

만일 모든 출처의 접근을 허용하게 된다면, 보안성의 문제와 해킹의 위험에 노출되기 때문에 모든 도메인의 접근을 허용하지 않고, 특정 도메인에서만 접근이 가능하도록 구현하는 것입니다.

우리가 프록시를 통해 우회하는 이유 1

프록시 서버를 통해 오히려 한 단계의[한채널의] 보안을 더 추가할 수 있다는 장점도 있고,
캐시를 사용하여 리소스로의 접근을 빠르게 하기 위해 사용되기도 합니다.
웹 프록시는 웹 서버로부터 웹페이지를 캐시로 저장하는데 흔히 쓰이며 캐싱을 통해 콘텐츠를 빠르게 가져올 수 있습니다.

우리가 프록시를 통해 우회하는 이유 2

또한 사용률을 기록하고 검사하기 위해 사용할 수 있습니다. 관리자의 입장에서 클라이언트에 대한 사용정보를 별도의 프록시 서버에서 관리함으로서 민감한 정보와 민감하지 않은 정보의 계층을 분리하여 관리할 수 있습니다.
덧붙여, 이용자가 파일을 업로드할 수 있는 경우 악성코드를 목적으로 전달된 콘텐츠를 메인서버에서 확인하기 이전에 해당 콘텐츠가 적합한지 검사하기 위해 이용될 수 있습니다. 따라서 한단계의 중계서버를 거치기 때문에 보안성은 더욱 높아지고 민감한 정보가 저장된 메인서버를 지키기 더 수월해집니다.

웹팩에서 프록시 사용하기

// webpack.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
  }
};

CRA를 통해 만든 리액트에서의 프록시 적용

...
"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
	"proxy" : "우회할 API 주소"
}
//proxy는 보통 맨 밑에 작성을 해 금방 찾을 수 있도록 합니다.

기존의 fetch, 또는 axios를 이용해 요청하던 부분에서 도메인 주소만을 삭제합니다.

export async function getAllfetch() {

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

위의 코드에서 우회할 api주소 만을 삭제해 아래 코드처럼 바꾸면, proxy 미들웨어가 알아서 잡아줍니다.
원리가 궁금하다면, 미들웨어 참고 주소 [https://www.npmjs.com/package/proxy-middleware]

export async function getAllfetch() {

    const response = await fetch('/params');
    .then(() => {
			...
		})
}