CORS란?

  • CORS는 Cross-Origin Resource Sharing의 약자이다.

위키에서 찾아보면,

  • 보안상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다.

아래와 같은 상황에서 발생합니다.

브라우저에서 서로 다른 도메인:포트의 서버로 요청이 갈때 브라우저에서 발생한다.

// backend server와 create-react-app을 사용하는 경우를 예로 들면

브라우저(1111포트) <-> 프론트서버(1111포트) <-> 백엔드서버(2222포트)

브라우저에서 다른 호스트를 가진 서버로 HTTP 요청을 보낼 때, 보안을 위해 자체적으로 요청이 차단된다. CORS는 브라우저에서 발생한다.

CORS 해결법

서버 관점에서 해결

http response header 설정

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: HOST
  • 위 처럼 응답을 설정하여 해결한다. 혹은,
const express = require('express')
const cors = require('cors')
const app = express()
 
app.use(cors())
  • 모듈을 사용하여 간단하게 해결할 수도 있다.

프론트엔드(React.js)의 관점에서는

프록시 서버를 설정합니다.

  • 프록시 서버: 브라우저와 서버의 통신 과정 중간에서 정보교환을 도와주는 서버
  • create-react-app을 사용한다면 아래 처럼 간단하게 해결 할 수 있다.
// package.json
{
	...,
	proxy: "xxx.xxx.xxx.xxx:8080"
}

좀 더 디테일하게는

  • 내 로컬 서버를 이용하는 획일화된 개발환경이라면 문제가 없지만, 경우에 따라, 자주 프록시가 변경하는 등의 복잡한 설정이 필요한 경우가 있다.
  • 이런 경우, 소스코드에 저장된 proxy 를 매번 바꾸기 어려우므로 아래와 같은 해결 방법을 사용할 수 있습니다.
// 1. src/setupProxy.js 파일 생성
// create-react-app의 기본 설정으로, 위 같은 경로에 파일을 생성할 시,
// 위 파일을 참고하여 proxy를 세팅하게 되어있다.
// 
// 2. npx yarn add http-proxy-middleware
// http-proxy-middleware는 코드 레벨에서의 proxy 설정을 도와준다.
//
// !ES6 문법 사용 금지

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

const HOSTS = {
  'dev-server': 'http://xxx.xxx.xxx.xxx:xx',
  'production-server': 'https://xxx.xxx.xxx.xxx:xx',
};

function getHostUrl() {
  const defaultHostName = 'dev-server';
  return HOSTS[process.env.REACT_APP_HOST_NAME || defaultHostName];
}

module.exports = function (app) {
  app.use(createProxyMiddleware(getHostUrl());
};
  • 위 처럼 환경변수를 받아 동적으로 proxy를 설정해주는 환경을 세팅할 수 있다.
  • 아래의 명령어를 이용하여 프로젝트를 proxy 세팅이 포함된 프로젝트를 실행한다.
$ REACT_APP_HOST_NAME=production-server npx yarn start

$ REACT_APP_HOST_NAME=dev-server npx yarn start