📌 CORS란?

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

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때, 교차 출처 HTTP 요청을 실행한다.

ex) https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우 보안 상의 이유로 브라우저는 HTTP 요청을 제한한다.

CORS 체제는 브라우저와 서버 간의 안전한 교차 출처 요청 및 데이터 전송을 지원한다.
CORS 표준에 맞춘다는 것은 서버에서도 새로운 요청과 응답 Header를 처리해야한다.

🤿 DeepDive

CORS 표준은 웹 브라우저에서 허용된 출처를 서버에서 새로운 HTTP Header에 추가함으로써 동작한다.

📮 Simple Request

HTTP 요청 메서드가 GET, POST 일 때 사용한다.

다른 출처끼리 요청을 보낼 때, 요청에 Origin이라는 Header를 추가한다.
1
https://loco9939.com:5000
- Origin은 요청하는 쪽의 Scheme, 도메인, 포트가 담겨있다.
- scheme : https
- 도메인 : loco9939.com
- 포트 : :5000
요청 받은 서버는 응답 Header에 지정된 ACAO(Access Control Allow Origin) 정보를 실어서 보낸다.
브라우저가 ACAO 정보가 담긴 응답과 요청의 Origin을 비교하여 동일하면 허락한다.

✈️ Preflight

브라우저가 사전요청을 먼저 보낸 후 서버의 응답을 보고 안전한지 확인한 후 본 요청을 보내는 방식이다. 본 요청은 Simple Request 방식과 동일하다.

🌈 CORS 오류 해결 방법

🔨 서버 측

ACAO(Access Control Allow Origin) 설정하기
- 구체적인 출처 명시하기
- Credentials: include 옵션 사용한 경우 * 사용한 경우 CORS 에러발생

var http = require("http");

const PORT = process.env.PORT || 3000;

var httpServer = http.createServer(function (request, response) {
  // Setting up Headers
  response.setHeader("Access-Control-Allow-origin", "*"); // 모든 출처(orogin)을 허용
  response.setHeader(
    "Access-Control-Allow-Methods",
    "GET, POST, OPTIONS, PUT, PATCH, DELETE"
  ); // 모든 HTTP 메서드 허용
  response.setHeader("Access-Control-Allow-Credentials", "true"); // 클라이언트와 서버 간에 쿠키 주고받기 허용

  // ...

  response.writeHead(200, { "Content-Type": "text/plain" });
  response.end("ok");
});

httpServer.listen(PORT, () => {
  console.log("Server is running at port 3000...");
});

Access-Control-Allow-origin 헤더 값으로 * 을 사용하면 모든 Origin에서 오는 요청을 허용한다는 의미이므로 당장은 편할 수 있겠지만, 바꿔서 생각하면 정체도 모르는 이상한 출처에서 오는 요청까지 모두 허용하기 때문에 보안은 더 허술해진다. 그러니 가급적이면 귀찮더라도 다음과 같이 출처를 직접 명시해주도록 하자.

👑 클라이언트 측

Proxy 설정
- 브라우저 요청을 Proxy에서 설정한 주소로 우회하여 전송하는 방법
- 라이브러리 사용한다
- 개발단계에서만 사용하고 Production 환경에서는 Proxy 처리가 되지 않는다.

🥁 CORS