CORS (Cross-Origin Resource Sharing)

작성일: at 오전 06:39

Table of contents

Open Table of contents

CORS (Cross-Origin Resource Sharing)

CORS는 서버 측 리소스를 보호하기 위한 정책이다.

  1. 서버에서 클라이언트로 페이지를 전달한다. (이때 도메인은 https://example.com 이라고 가정한다.)

  2. https://example.com 페이지에서 https://example.com/resource 경로로 Resource를 요청한다. (여기서 실제 요청을 보내기 전에 OPTIONS 메소드로 preflight 요청을 보내 응답을 사용할 수 있는지 확인한다.)

  3. 요청을 받은 서버 측에서 요청 헤더의 Origin 헤더 (https://example.com)와 요청한 URL (https://example.com/resource)의 출처를 비교한다. (출처는 Scheme, Host, Port 세 가지 조건을 포함한다.)

  4. 서버 측에서 응답 헤더에 CORS 관련 헤더 (Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers 등)를 설정한다. Access-Control-Allow-Origin 헤더는 특정 도메인이나 *로 설정될 수 있다. (대부분의 웹 서버는 기본적으로 CORS 헤더를 설정하지 않음으로써 SOP(Same-Origin Policy)를 적용한다.)

  5. 브라우저에서 CORS 헤더와 현재 도메인을 비교한 다음, 해당 도메인에서 사용할 수 있는 응답인지 확인한다. 만약 CORS 헤더의 조건과 현재 도메인의 조건이 맞지 않으면 CORS 에러를 표시하고 응답을 폐기한다.

개발중인 웹 사이트의 CORS 오류 해결하기

Vite에서 프록시를 설정하여 CORS 문제를 해결할 수 있다. Vite의 설정 파일 (vite.config.js)에서 프록시를 설정하는 예시는 다음과 같다.

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
      },
    },
  },
});

http://localhost:3000도메인에서 /api경로의 요청 헤더의 Origin 헤더를 target 속성으로 수정하여 CORS 문제를 해결할 수 있다.

요청이 특정 조건을 만족하면 단순 요청(Simple Request)으로 preflight 요청을 생략한다.

또한 CORS에서 인증 관련 헤더는 credentials 옵션에 따라 설정된다.

credentials의 기본 값은 same-origin이기 때문에 출처가 다른 요청에서는 Set-Cookie, Authorization, Cookie와 같은 헤더를 사용할 수 없다. 만약 credentials 옵션이 include로 설정되어 있고, 서버가 Access-Control-Allow-Origin: *로 응답을 설정하면 브라우저는 보안을 위해 응답을 폐기한다. 이는 와일드카드(*)와 credentials 옵션을 함께 사용할 수 없기 때문이다.