📒 목차

• 📌 CORS란?
• 📌 출처란?
• 📌 CORS 동작 방식
• 📌 CORS 해결 방법

📌 CORS란?

웹 개발을 하다보면 언젠가 아래와 같은 에러를 보는 날이 있다.

CORS는 Cross-Origin Resource Sharing의 약자이다. 해당 문장을 직역하게 되면, "교차 출처 리소스 공유 정책"이라 해석할 수 있다.

여기서 교차 출처란 엇갈린 다른 출처를 의미한다.

📌 출처란?

어떠한 사이트를 접속할 때, 우리는 URL이라는 문자열을 통해 접근하게 된다.

URL은 아래와 같은 구성요소로 이루어져 있다.

여기서 출처란 프로토콜, 호스트 그리고 포트를 의미한다.

📌 CORS 동작 방식

CORS 접근 제어 시나리오에는 3 가지 방식이 있다.

✅ 1. 프리플라이트 요청 (Preflight Request)

Preflight Request는 요청을 예비 요청과 본 요청으로 나누는데, OPTIONS 메서드를 통해 다른 도메인의 리소스에 요청이 가능한지 (실제 요청이 전송하기에 안전한지) 확인 작업을 한 뒤, 요청이 가능하다면 실제 요청을 보내게 된다.
Cross-origin 요청은 유저 데이터에 영향을 줄 수 있기 때문에 Preflight 요청을 한다.

✅ 2. 단순 요청 (Simple Request)

Simple Request는 Preflight Request와 다르게 요청을 보내면서 즉시, cross origin인지 확인한다.
또한, 아래와 같은 조건을 모두 충족해야한다.

• 메서드는 GET POST HEAD 중 하나
• 헤더는 Accept, Accept-Language, Content-Language, Content-Type 만 허용
• Content-Type 헤더는 다음의 값들만 허용
  - application/x-www-form-urlencoded
  - multipart/form-data
  - text/plain

✅ 3. 인증정보 포함 요청 (Credential Request)

인증 관련 헤더를 포함할 때 사용하는 요청이다.
브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 기본적으로 요청에 담지 않기 때문에, credentials 옵션을 변경하지 않고서는 cookie를 주고 받을 수 없다.

옵션은 아래와 같이 세 가지가 있다.

• omit : 절대로 cookie 들을 전송하거나 받지 않는다.
• same-origin : 동일 출처(same origin)이라면, user credentials (cookies, basic http auth 등..)을 전송한다. (default 값)
• include : cross-origin 호출이라 할지라도 언제나 user credentials (cookies, basic http auth 등..)을 전송한다.

📌 CORS 해결 방법

✅ Access-Control-Allow-Origin 응답 헤더 세팅

서버측 응답에서 접근 권한을 주는 헤더를 추가해서 해결한다.

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*"); // 모든 도메인
  res.header("Access-Control-Allow-Origin", "https://example.com"); // 특정 도메인
});

✅ cors 모듈 사용

cors 모듈을 사용하여 해결한다.

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

app.use(cors());

✅ package.json에 proxy값을 설정

package.json 에 proxy 값을 설정하여 proxy 기능을 활성화 하는 방법으로 해결한다.

{
  //...
  "proxy": "http://localhost:3000"
}

📌 참조

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

https://ingg.dev/cors/