CORS의 개념 (Cross Origin Resource Sharing)

Park db·2020년 11월 27일
0
post-thumbnail

  • cross-origin HTTP 요청을 서버에서 승인하도록 하여 클라이언트가 다른 도메인의 데이터에 접근할수 있는 권한을 부여하도록 브라우저에 알려주는 체제 (자신의 호스트(도메인), 프로토콜, 포트 와 다를때 cors 요청을 실행)

세가지 요청방법

  1. Simple requests : Preflight가 발생하지 않는 조건을 가진 요청일때 발생
    • get, head, post 중 한가지 메소드 사용
    • post를 사용할 경우 content-type이 application/x-www-form-urlencoded, multipart/form-data, text/plain 중 하나이며 커스텀 헤더를 전송하지 않을때 사용됨
  2. Preflight : 본 요청전 안전한지 확인하는 확인용 요청을 먼저 보낸다 (브라우저의 보안 조치)
    • 클라이언트가 메소드로 리소스를 웹 서버에게 전송하게 되면, 리소스가 바로 전송되는게 아닌 OPTIONS 메소드가 실행이 되고 이후에 리소스 전송이 됩니다. (확인요청)
    • Access-Control-Allow-Origin, Access-Control-Request-Headers, Access-Control-Request-Method 를 기본적으로 주고받는다
    • Preflight 방식은 많은 리소스를 잡아먹기 때문에 max-age 헤더 정보를 통해서 Preflight를 캐싱 함으로써 효율적으로 사용할 수 있다. (캐시 정보가 있을경우 Preflight 요청을 하지 않고 바로 본 요청을 보낸다)
  3. Credentialed requests : 인증정보를 포함한 요청임
    • credentials 옵션을 사용하여 적용한다
    • Access-Control-Allow-Origin* 와일드카드를 사용할수 없고, 응답 헤더에 Access-Control-Allow-Credentials: true 가 반드시 있어야 한다.

적용하기

node.js 에서 미들웨어로 cors 를 적용할수 있다!
npm i cors

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

const app = express();
//cors 기본설정 옵션들
app.use(cors({
	origin: "*",
  	methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  	preflightContinue: false,
  	optionsSuccessStatus: 204
}));

cors : https://vvshinevv.tistory.com/60

profile
나를 뛰어넘자!

0개의 댓글