CORS (Cross-Origin Resource Sharing)

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

CORS의 동작 원리

기본적으로 웹에서 다른 출처로 리소스를 요청할 때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데 이 때 브라우저는 origin이라는 필드에 요청을 보내는 출처를 담아서 보낸다.

이후 서버가 이 요청에 대한 응답을 할 때 응답 헤더 Access-Control-Allow-Origin라는 값에 이 리소스에 접근하는 것이 허용된 출처를 같이 보내주고, 응답을 받은 브라우저는 자신이 보낸 Origin 과 서버가 보내준 응답의 Access-Control-Allow-Origin를 비교한 후 이 응답이 유효한지 판별한다.

CORS 에러를 해결하는 방법

1. 타인의 프록시 서버 사용하기
   프록시 서버는 클라이언트가 프록시 서버를 통하여 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해준다. 브라우저가 서버 간의 통신을 도와주는 중계서버라고 볼수 있다.

2. 로컬한정으로 http-proxy-middleware 사용하기
   배포하기 전 로컬환경 한정일 때 사용하면 좋은 라이브러리.
   http-proxy-middleware를 설치후에 setupProxy.js 라는 파일을 src폴더 내에 만들고 코드를 작성하면 된다.

const { createProxyMiddleware } = reauire("http-proxy-middleware")

module.exports = function(app) {
  app.use (
    	"/api",
    	createProxyMiddleware({
          		target: "http://localhost:3000",
          		changeOrigin: true,
        })
    )
}

Proxy

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

Proxy 사용법

webpack dev server proxy

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

proxy는 보통 맨 밑에 작성을 해 금방 찾을 수 있도록 한다.

React Proxy 사용법

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

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

npm install http-proxy-middleware --save

React App의 src 파일 안에서 setupProxy.js 파일을 생성하고 안에서 설치한 라이브러리 파일을 불러온 다음 아래와 같이 작성을 한다.

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

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