CORS 정책이 필요한 이유 와 Proxy

CORS란

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

출처는 접근할 때 사용하는 URL의 프로토콜(스킴) + 도메인(호스트) + 포트를 말하는 것인데, 두 출처의 프로토콜, 호스트, 포트가 모두 일치하는 경우 같은 출처를 가졌다고 할 수 있다.

서비스 및 프로젝트가 모든 출처의 접근을 허락한다면 이러한 보안성이 현저히 낮아지고, 해킹의 위험에 그대로 노출되게 됨으로 모든 도메인을 허용해서는 안 되고, 특정 도메인을 허용하도록 구현해야 한다. 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용해달라고 요청을 해야하고, 백엔드 개발자는 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 함으로 서버에서 적절한 응답 헤더를 받지 못하면 브라우저에서 에러가 발생하기 때문이다

 

 

Proxy

프록시(Proxy)는 "대리"의 의미로, 인터넷과 관련해서 쓰이는 경우, 특히 내부 네트워크에서 인터넷 접속을 할 때에, 빠른 액세스나 안전한 통신등을 확보하기 위한 중계서버를 "프록시 서버"라고 일컫는다. 클라이언트와 Web서버의 중간에 위치하고 있어, 대신 통신을 받아 주는 것이 프록시 서버이다. 

프록시 서버 사용이유

1. 보안

만약 클라이언트에서 라고 요청을 보낼 경우 서버의 주소가 쉽게 노출되고 이를 통해서  다른 익명의 사용자가 서버로 접근하기 쉬워지게 된다. 하지만 프록시 서버를 거쳐 "자 이거 서버로 요청보내!" 라고 명령을 내리면 다른 익명의 사용자는 서버의 위치를 알아내기가 쉽지 않다.

서버의 IP를 숨기는 것이 가능하고 이는 외부로부터 위험을 막아주는 역할을 한다.

 

2. 캐시

 속도를 빠르게 하는데 도움을 준다. 캐시가 속도를 빠르게 하는데 도움을 주는 방식은 바로 이전에 했던 요청들을 프록시 서버에 저장(캐시) 해두어 다음 번에 재요청을 보낼 때 서버를 거치지 않고 데이터를 주고 받을 수 있기 때문에 속도가 더 빨라질 수 있다.

 

3. 우회

보안에서는 클라이언트에서 서버의 주소를 감출 수 있다. 이와 같이 IP 주소를 감출 수가 있기 때문에 어느 곳에서 접속한지를 숨길 수가 있다. IP를 통해 접속을 감지하는 사이트를 프록시 서버를 통해 우회할 수가 있다.

Proxy 사용법

webpack dev server proxy

브라우저 API를 요청할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 우회 요청을 하게 된다 웹팩 개발 서버에서 해당 요청을 받아 그대로 백엔드 서버로 전달하고, 백엔드 서버에서 응답한 내용을 다시 브라우저쪽으로 반환한다

 

 

package.json 에서 "proxy" 값을 설정하여 쉽게 적용할 수 있도록 구성

"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 주소"
}

 

 

기존의 fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거

export async function getAllfetch() {

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

export async function getAllfetch() {

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

 

React Proxy 

webpack dev server 에서 제공하는 proxy는 전역적인 설정이기 때문에, 종종 해당 방법이 충분히 적용되지 않는 경우가 생기는 경우가 있어 수동으로 proxy를 적용해줘야 하는 경우가 있는다  =>http-proxy-middleware 라이브러리를 사용해야 합니다.

 

 

http-proxy-middleware 라이브러리 설치

npm install http-proxy-middleware --save

 

 

setupProxy.js 파일을 생성하고, 안에서 설치한 라이브러리 파일을 불러온다

setupProxy.js 는 별도의 import를 할 필요 없이 자동으로 실행된다(파일 이름을 오타내지 않게 주의)

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

module.exports = function(app) {
  app.use(
    '/api', //proxy가 필요한 path prameter를 입력합니다.
    createProxyMiddleware({
      target: 'http://localhost:5000', //타겟이 되는 api url를 입력합니다.
      changeOrigin: true, //대상 서버 구성에 따라 호스트 헤더가 변경되도록 설정하는 부분입니다.
    })
  );
};

 

 

fetch, 혹은 axios를 통해 요청하던 부분에서 도메인 부분을 제거한다

export async function getAllfetch() {

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

export async function getAllfetch() {

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