[Network] CORS

SOP (Same-Origin Policy)

모든 브라우저는 기본적으로 SOP를 사용하고있습니다.

여기서 SOP는 동일 출처 정책을 말합니다. 같은 출처의 리소스만 공유가 가능하다라는 정책으로 출처에 대한 설명은 다음과 같습니다

• 프로토콜
• 호스트
• 포트

이들 중 한가지라도 다르면 리소스의 공유가 불가능합니다.

CORS (Cross-Origin Resource Sharing)

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

쉽게 말해 우리가 다른 출처에서 리소스를 가져오고 싶을 때 사용하는 방법입니다.

CORS의 세가지 동작 방식

1. 프리플라이트 요청 (Preflight Request)
   실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것을 프리플라이트 요청이라고 합니다.

2. 단순 요청 (Simple Request)
   단순 요청은 특정 조건이 만족되면 프리플라이트 요청을 생략하고 요청을 보내는 것을 말합니다.

3. 인증정보를 포함한 요청 (Credentialed Request)
   요청 헤더에 인증 정보를 담아 보내는 요청입니다. 출처가 다를 경우에는 별도의 설정을 하지 않으면 쿠키를 보낼 수 없습니다. 민감한 정보이기 때문입니다. 이 경우에는 프론트, 서버 양측 모두 CORS 설정이 필요합니다.

CORS 설정

1. Node.js 서버

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://codestates.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

2.Express 서버

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

//모든 도메인
app.use(cors());

//특정 도메인
const options = {
  origin: "https://codestates.com", // 접근 권한을 부여하는 도메인
  credentials: true, // 응답 헤더에 Access-Control-Allow-Credentials 추가
  optionsSuccessStatus: 200, // 응답 상태 200으로 설정
};

app.use(cors(options));

//특정 요청
app.get("/example/:id", cors(), function (req, res, next) {
  res.json({ msg: "example" });
});