악명 높은 CORS에 대한 이해

CORS(Cross Origin Resource Sharing)란?

Access to fetch at ‘https://myhompage.com’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

출처(Origin) 란?

console.log(location.origin); // "https://www.example.com" (포트 번호 80번은 생략됨)

동일 출처 정책 (Same-Origin Policy)

Same-Origin Policy (SOP)

동일 출처 정책이 필요한 이유

같은 출처와 다른 출처 구분 기준

출처 비교와 차단은 브라우저가 수행

브라우저 설정에서 SOP 비활성화에 대한 방법

교차 출처 리소스 공유 CORS (Cross-Origin Resource Sharing)

CORS 에러와 SOP 정책

CORS 정책 준수하며 SOP 정책 회피하기

1. 클라이언트에서 HTTP 요청의 헤더에 Origin을 담아 전달
• 웹은 HTTP 프로토콜을 사용하여 서버에 요청을 보냅니다. 브라우저는 요청 헤더에 Origin 필드에 출처를 함께 담아 보냅니다.

2. 서버는 응답 헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달
• 서버가 요청에 대한 응답을 할 때 응답 헤더에 Access-Control-Allow-Origin 필드를 추가하고 '이 리소스를 접근하는 것이 허용된 출처 URL'을 값으로 넣어 클라이언트에 전달합니다.

3. 클라이언트에서 Origin과 서버가 보내준 Access-Control-Allow-Origin을 비교
• 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin과 서버가 보내준 응답의 Access-Control-Allow-Origin을 비교해본 후 차단 여부를 결정합니다. 유효하지 않다면 해당 응답을 사용하지 않고 CORS 에러가 발생합니다.

CORS 해결책은 서버의 허용이 필요

CORS 작동 방식 3가지 시나리오

예비 요청 (Preflight Request)

1. 브라우저에서의 예비 요청 보내기
• 브라우저는 서버로 OPTIONS 메소드로 예비 요청을 보냅니다.
• 이때, Origin 헤더에는 자신의 출처를, Access-Control-Request-Method 헤더에는 실제 요청에 사용할 메소드를, Access-Control-Request-Headers 헤더에는 실제 요청에 사용할 헤더들을 설정합니다.

2. 서버에서의 예비 요청 응답
• 서버는 예비 요청에 대한 응답으로 다음과 같은 헤더 정보를 브라우저로 전송합니다.
• Access-Control-Allow-Origin: 허용되는 Origin들의 목록을 설정합니다.
• Access-Control-Allow-Methods: 허용되는 메소드들의 목록을 설정합니다.
• Access-Control-Allow-Headers: 허용되는 헤더들의 목록을 설정합니다.
• Access-Control-Max-Age: 해당 예비 요청이 브라우저에 캐시될 수 있는 시간을 초 단위로 설정합니다.

3. 브라우저에서의 본 요청 전송
• 브라우저는 서버의 응답을 기반으로 예비 요청과 본 요청의 안전성을 비교합니다.
• 안전하다고 판단되면 본 요청을 보냅니다.

4. 서버에서의 본 요청 응답
• 서버는 본 요청에 대한 응답을 생성하고 브라우저로 전송합니다.

5. 자바스크립트에서의 데이터 처리
• 브라우저는 받은 본 요청의 응답 데이터를 자바스크립트로 넘겨줍니다.

개발자 도구에서 예비 요청 확인하기

await fetch("http://localhost:4000/users/location-registration", {"method":"DELETE"})

예비 요청 헤더 및 응답 확인

• 요청 헤더에는 Origin과 관련된 정보가 포함되며, 응답 헤더에는 CORS 관련 정보인 Access-Control-Allow-Origin 등이 포함됩니다.

• 두 헤더의 URL 값이 일치하면 CORS가 허용되어 정상 응답을 받을 수 있습니다. 다른 출처의 경우 CORS 정책 위반으로 인한 에러가 발생할 수 있습니다.

예비 요청의 문제점과 캐싱

• 예비 요청은 보안을 강화하지만, 실제 요청에 소요되는 시간이 증가하여 성능 저하가 발생합니다.

• Access-Control-Max-Age 헤더를 사용하여 예비 요청을 캐싱함으로써 성능 최적화가 가능합니다.

예비 요청 캐시 설정

• Access-Control-Max-Age 헤더를 사용하여 브라우저에 캐시된 결과를 설정된 기간 동안 사용합니다.

• 캐시된 결과를 이용하면 서버에 대한 예비 요청을 반복해서 보내지 않아 성능이 향상됩니다.

예시 코드

// 예비 요청(Preflight Request)을 포함한 API 요청
fetch("http://localhost:4000/users/location-registration", {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer your_access_token"
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

단순 요청 (Simple Request)

단순 요청을 사용할 수 있는 조건

1. 요청의 메소드는 GET, HEAD, POST 중 하나여야 합니다.

2. 특정 헤더들(Accept, Accept-Language, Content-Language, Content-Type, DPR, Downlink, Save-Data, Viewport-Width, Width) 중 일부만 사용될 때 해당합니다.

3. Content-Type 헤더가 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나여야 합니다.

주의사항

• 대부분의 API 요청은 JSON 등의 형식으로 통신하므로 Content-Type이 특정 조건을 만족하지 않아 예비 요청이 발생하는 경우가 많습니다.

• 대부분의 API 요청은 예비 요청(preflight)을 수반하는 것이 일반적이며, 단순 요청이 발생하는 경우는 제한적입니다.

예시 코드

// 단순 요청의 예시 (POST 메소드, Content-Type이 text/plain)
fetch("http://example.com/api/data", {
  method: "POST",
  headers: {
    "Content-Type": "text/plain"
  },
  body: "Hello, server!"
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

인증된 요청 (Credentialed Request)

클라이언트에서 인증 정보를 보내도록 설정하기

• same-origin (기본값): 같은 출처 간 요청에만 인증 정보를 담을 수 있습니다.

• include: 모든 요청에 인증 정보를 담을 수 있습니다.

• omit: 모든 요청에 인증 정보를 담지 않습니다.

// fetch 메서드
fetch("https://example.com:1234/users/login", {
    method: "POST",
    credentials: "include", // 인증 정보를 공유하겠다는 설정
    body: JSON.stringify({
        userId: 1,
    }),
})

// axios 라이브러리
axios.post('https://example.com:1234/users/login', { 
    profile: { username: username, password: password } 
}, { 
    withCredentials: true // 인증 정보를 공유하겠다는 설정
})

// jQuery 라이브러리
$.ajax({
    url: "https://example.com:1234/users/login",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",		
    xhrFields: { 
        withCredentials: true // 인증 정보를 공유하겠다는 설정
    },
    success: function (retval, textStatus) {
        console.log(JSON.stringify(retval));
    }
});

서버에서 인증된 요청에 대한 헤더 설정하기

• 응답 헤더의 Access-Control-Allow-Credentials 항목을 true로 설정해야 합니다.

• 응답 헤더의 Access-Control-Allow-Origin 값에 와일드카드 문자()는 사용할 수 없습니다.

• 응답 헤더의 Access-Control-Allow-Methods 값에 와일드카드 문자()는 사용할 수 없습니다.

• 응답 헤더의 Access-Control-Allow-Headers 값에 와일드카드 문자()는 사용할 수 없습니다.

• Access-Control-Allow-Credentials 설정을 하지 않았을 경우

• Access-Control-Allow-Origin가 로 설정되어 있을 경우

CORS를 해결하는 방법

Chrome 확장 프로그램 이용

프록시 사이트 이용하기

heroku 프록시 서버

• cors-anywhere.herokuapp.com

javascriptCopy code
const url = 'https://google.com' // 이 부분을 이용하는 서버 URL로 변경

fetch(`https://cors-anywhere.herokuapp.com/${url}`)
    .then((response) => response.text())
    .then((data) => console.log(data));

cors proxy app 프록시 서버

• cors-proxy.org

htmlCopy code
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js'></script>
<script>
    axios({
        url: 'https://cors-proxy.org/api/',
        method: 'get',
        headers: {
            'cors-proxy-url': 'https://google.com/' // 이 부분을 이용하는 서버 URL로 변경
        },
    }).then((res) => {
        console.log(res.data);
    })
</script>

cors.sh 프록시 서버

• cors.sh

javascriptCopy code
const url = 'https://google.com' // 이 부분을 이용하는 서버 URL로 변경

fetch(`https://proxy.cors.sh/${url}`)
    .then((response) => response.text())
    .then((data) => console.log(data));

서버에서 Access-Control-Allow-Origin 헤더 설정하기

Node.js 세팅

javascriptCopy code
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', 'https://inpa.tistory.com'); // 특정 출처만 허용
    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...');
});

Express.js 세팅

javascriptCopy code
const express = require('express')
const cors = require("cors");

const app = express();

// ...

app.use(cors({
    origin: "https://naver.com", // 접근 권한을 부여하는 도메인
    credentials: true, // 쿠키 인증 요청 허용
    optionsSuccessStatus: 200, // 응답 상태 200으로 설정
}));

AWS S3 호스팅 세팅

jsonCopy code
[
  {
    "AllowedHeaders": ["Authorization"],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedOrigins": ["http://www.example.com"],
    "ExposeHeaders": ["Access-Control-Allow-Origin"]
  }
]

글을 마치며

Reference