Cors란 무엇인가?

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

 

즉, 무분별하게 클라이언트가 다른 리소스에 접근하는 것을 막는 보안 이슈이다.

 

예를들어 클라이언트가 3000포트이고 서버가 5000포트라면 클라이언트가 서버에 접근하면 연결을 차단한다.

이유는 포트가 달라서이고 도메인이 달라도 안돼고 아이피가 달라도 안됀다.

다시말해서 처음 리소스를 요청했던 그 주소가 아니라면 차단해버린다는 것이다.

 

하지만 프론트엔드를 개발하다가 서버에 요청을 보낼때 아래와 같은 오류가 console에 찍히는 경험을 해보았을 것이다.

 

Access to XMLHttpRequest at 'http://xxx' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

해결방법은 여러가지가 있다.

Access-Control-Allow-Origin 세팅

서버에서 응답할때 header에 Access-Control-Allow-Origin : * 를 설정해준다.

* 는 모든 요청을 허용한다는 뜻이다. 하지만 가급적이면 특정 도메인을 명시해주는 것이 좋다.

Cors 정책에 존재 이유가 보안때문인데 보안을 없앤다는 의미는 결국 서버 클라이언트 모두 취약해진다는 것을 의미한다.

 

Node.js Express를 예를들면 Cors 미들웨어 라이브러리를 제공한다. index.js에서

const express = require('express');
const cors = require('cors');
const app = express();

// CORS 설정
app.use(cors());

단 한줄로 해결이 가능하다.

Access-Control-Allow-Origin를 세팅해주는 방법은 오직 서버측에서만 가능하다.

클라이언트에서 해결할 방법은 Proxy를 사용하는 것이다.

글쓴이는 Proxy를 사용하여 해결하였다.

Proxy

Proxy란 유저가 인터넷에 요청을 보낼때 직접 보내는 것이 아니라 Proxy 서버를 거쳐 최종 목적지까지 전달하게 한다.

이때 Proxy서버를 거치면서 유저의 IP를 바꿀 수 있다.

다시말해, 유저의 실제 IP와 포트를 알 수 없도록 하는 것이 프록시 서버의 역할이다.

 

React 프로젝트에서 Proxy로 Cors 해결하기(Local)

Cors는 위에서 설명했다 싶이 처음 리소스를 요청한 주소와 다르면 발생한다.

그렇다면 Proxy 서버를 거쳐서 처음 리소스를 요청한 주소와 동일하게 한다면 오류는 사라진다는 말과 다르지 않다.

 

npm install http-proxy-middleware

 

터미널에 입력하여 proxy 미들웨어를 패키지에 설치한다.

 

//setupProxy.js

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

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

 

 

클라이언트와 서버와 포트를 같게 하기 위해서 위 처럼 코드를 작성해준다.

위 코드는 /api라는 주소로 요청을 보낼땐 localhost:5000으로 바꾸어 요청을 보낸다는 것이다.

결과적으로 클라이언트와 서버는 완전히 같은 리소스이기 때문에 Cors가 발생하지 않는다.

 

참고로 구동했던 클라이언트는 :3000이고 서버는 :5000이었다

프록시를 거치면 :5000으로 보내게 된다.