Same-origin policy & CORS

Same-origin policy(동일 출처 정책)

동일 출처 정책은 웹 보안을 위한 정책이다.

동일 출처란?
1. protocol (http, https)
2. port
3. host (domain : naver.com ...)

세가지가 같을 때 동일 출처로 판단한다.

서버가 8080 포트를 가지고 클라이언트가 3000 포트를 가질 때
클라이언트에서 서버로 ajax 요청을 보내면 동일 출처 정책으로 오류가 난다.

Cross-Origin Resource Sharing (CORS)

Same-origin policy를 해결할 수 있는 정책이다.
Cross-origin이라도 통신을 허용하는 정책이다.

서버에서 처리하기

Access-Control-Allow-Origin respose header로 서버 응답 해더에
접근 권한을 주는 해더를 추가하여 에러를 해결할 수 있다.

요청을 서버로 전송할 때 Origin 헤더를 추가해서 보낸다.
서버는 응답 헤더에 Access-Control-Allow-origin을 추가해서 보내는데 헤더에는 요청을 허용할 도메인이 적혀있다.
브라우저는 서버가 해당 요청을 허용한지 확인한다.
허용된 요청이 아니라면 에러를 발생한다.

미들웨어 CORS

node.js와 express를 사용했을 때 다뤘다.

cors를 다운로드한다.

npm install cors --save

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

app.use(cors());

모든 CORS 요청을 받는다.

const corsOptions = {
    origin: true,
    credentials: true
  };

cors에 옵션을 추가해서 사용할 수 있다.

app.use(cors(corsOptions));

참조
Express cors middleware
MDN Cors