CORS

CORS : 교차 출처 리소스 공유 (Cross-origin resource sharing)
현재 브라우저로 접속 중인 페이지에서 자바스크립트를 이용해 다른 도메인 또는 포트를 가진 주소로 요청을 하는 경우, 해당 리소스에 접근을 허용했는지 확인해 보안을 높이는 동작.

CORS 문제 해결하기

1. cors 모듈 설치
   npm install cors

2. 미들웨어 추가

// 모든 요청 허용
const express = require("express");
const cors = require("cors"); // cors 모듈 불러오기
const app = express();
const port = 3000;

app.use(cors()); // cors 미들웨어 실행 (모든 요청 허용)

app.get("/cors-test", (req, res) => {
  res.send("hi");
});

app.listen(port, () => {
  console.log("서버가 켜졌어요!");
});

// 특정 도메인만 허용
const express = require("express");
const cors = require("cors");
const app = express();
const port = 3000;

const corsOption = { //cors option 정의
  origin: "https://www.test-cors.org", // 허용할 도메인 입력
  credentials: true,
};

app.use(cors(corsOption)); // cors 미들웨어 실행

app.get("/cors-test", (req, res) => {
  res.send("hi");
});

app.listen(port, () => {
  console.log("서버가 켜졌어요!");
});

CORS preflight :

클라이언트(웹 브라우저)가 요청하려고 시도했던 리소스 출처 주소(백엔드 서버)에 "OPTIONS" 메서드를 이용해 '요청을 의도적으로 허용하고 있는 게 맞는지' 확인하는 과정.
서버의 허가가 떨어지면 클라이언트에게 실제 요청을 보내도록 요구함. 또한 서버는 클라이언트에게 요청에 "인증정보"(쿠키, HTTP인증)을 함께 보내야한다고 알려줄 수 있음.

CORS 테스트 페이지 : https://test-cors.org