CORS 에 대해서 알아보기

 

CORS(Cross-Origin Resource Sharing)

CORS 란 교차 출처 리소스 공유를 의미한다.

브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 해주는 보안 메커니즘이다.

 

브라우저는 기본적으로 SOP(Same-Origin Policy) 정책을 따르는데, 이 정책은 같은 출처에서만 리소스를 공유할 수 있다고 정한 정책이다.

 

그러나 개발을 하다보면, 클라이언트와 서버의 출처(Origin)가 서로 다를 수 있다.

예를 들어, 리액트 서버(포트 번호 3000) 와 스프링부트 혹은 익스프레스 서버(포트 번호 8080) 가 리소스를 주고받으려 하면 서로 다른 출처로 판단되어서 CORS 위반 에러가 난다.

출처 : 코딩온 교안 자료

참고로 출처(Origin) 는

프로토콜(http 또는 https)

도메인(test.com)

포트 번호(:8080, :3030 등)

이 세 가지가 모두 동일할 때만 동일 출처로 간주된다.

출처 : https://docs.tosspayments.com/resources/glossary/cors

 

 

예를 들어 https://www.test.com:8080 이라는 url 이 있을 때

• https://test.com:8080 -> 같은 출처로 간주
• http://www.test.com:8080 -> 프로토콜이 다르므로 다른 출처로 간주
• http://sub.test.com -> 도메인이 다르므로 다른 출처로 간주
• https://www.test.com:3030 -> 포트번호가 다르므로 다른 출처로 간주

 

CORS 요청 종류

1) Simple Request (단순 요청)

브라우저가 사전 요청없이 바로 요청을 보내는 경우

요청 메서드는 GET, POST, HEAD 만 허용

Request Header 에는 다음 속성만 허용

Accept, Accept-Language, Content-Language,

Content-Type(application/x-www-form-urlencoded, multipart/form-data, text/plain) 

** application/json 은 simple request 에 해당하지 않는다.

** 클라이언트에서 임의로 커스텀 헤더를 추가하면 simple request 에 해당하지 않는다.

 

예시)

 

1. 클라이언트 요청

// 클라이언트 요청
fetch('https://example.com/api/message', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain', // 허용된 Content-Type
  },
  body: 'Hello World!', // 단순 텍스트
})
  .then(response => response.text())
  .then(data => console.log(data));

 

2. 서버 응답 헤더

HTTP/1.1 200 OK
Content-Type: text/plain
Access-Control-Allow-Origin: https://example.com

 

2) Preflight Request (사전 요청)

요청이 더 복잡하거나 보안적으로 민감할 경우, 브라우저는 OPTIONS 메서드를 사용하여 서버에 사전요청을 보낸다.

이 경우 브라우저는 요청을 한 번에 보내지 않고 사전 요청과 실제 요청으로 나누어서 요청하며,

사전 요청을 서버가 허용하면 실제 요청을 보낸다.

 

예시)

1. 사전 요청(OPTIONS) : 브라우저는 OPTIONS 메서드로 서버에 요청

OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Authorization

 

2. 서버 응답 : 서버는 허용 정보를 포함하여 응답

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Credentials: true

 

• Access-Control-Allow-Origin: 허용할 출처 명시 
• Access-Control-Allow-Methods: 허용할 HTTP 메서드 (GET, POST, PUT 등)
• Access-Control-Allow-Headers: 허용할 요청 헤더 (예: Authorization, Content-Type)
• Access-Control-Allow-Credentials: 인증 정보(쿠키, 인증 헤더 등) 허용 여부

 

 

3. 실제 요청 : 브라우저는 서버의 허용 여부를 확인 후, 실제 요청을 보냄

PUT /api/data HTTP/1.1
Authorization: Bearer <token>
Content-Type: application/json
Origin: https://example.com

 

4. 서버 응답

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Content-Type: application/json

 

 

CORS 설정 하기 (feat. Express.js)

CORS 설정은 서버에서 하는 것이 일반적이다.

브라우저는 보안 정책으로 CORS 강제한다. 

서버에서 응답 헤더를 통해 특정 출처를 허용한다고 명시하지 않으면, 브라우저는 요청이 성공하더라도 응답을 차단한다.

 

만약 Express.js 로 서버를 구축했다면 cors 미들웨어로 간단하게 CORS 설정을 할 수 있다.

 

다음의 커맨드로 cors 패키지를 설치한다.

npm install cors

 

cors 미들웨어를 등록한다.

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

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

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS enabled for all origins!' });
});

app.listen(8080, () => {
  console.log('Server is running on port 8080');
});

 

#1. 모든 출처에서 요청 허용

cors 는 기본적으로 모든 출처에서의 요청을 허용한다.

app.use(cors());

 

#2. 특정 출처에서의 요청만 허용

origin 옵션에 허용할 출처를 명시하면 특정 출처에서의 요청만 허용할 수 있다.

app.use(cors({
    origin : 'http://ex.com' -> 이 도메인에서의 요청만 허용
}))

 

#3. 특정 옵션 설정

여러 출처를 허용하고 싶다면 origin 옵션에 배열로 출처를 적어준다.

methods 에 허용할 메서드를 명시할 수 있다.

allowedHeaders 로 허용할 요청 헤더를 명시할 수 있다.

app.use({
    origin : ['http://ex.com', 'https://ex2.com'],
    methods : ['GET', 'POST'],
    allowedHeaders : ['Content-Type', 'Authorizaion']
})

 

#4. 인증 정보를 포함한 요청 허용

쿠키와 같은 인증 정보를 전달하려면  credentials 옵션을 설정한다.

이 경우 origin 은 반드시 명시적으로 설정해야 한다. ( * 사용 불가 )

app.use(cors({
  origin: 'http://ex.com', // 허용할 출처
  credentials: true,            // 인증 정보 허용
}));

 

이 경우에는 클라이언트 측 코드에서 요청을 보낼 때 withCredentials : true 를 설정해야 한다.

axios.get('http://server.com/api/data', { withCredentials: true });

 

 

 

Reference

코딩온 교안 자료

 

https://docs.tosspayments.com/resources/glossary/cors

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

 

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

https://velog.io/@effirin/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

CORS란 무엇인가?