http 접근 제어 CORS

오민영·2021년 7월 6일

HTTP Protocol

목록 보기

2/7

추가 http를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다.

웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 http 요청을 실행한다. 즉, 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말한다.

예를 들어, XMLHttpRequest와 Fetch API는 동일 출처 정책(same-origin Prolicy) 때문에, CORS와 같은 상황이 발생하면 외부 서버에 요청한 데이터를 브라우저 보안 목적으로 차단한다. 그로 인해 정상적으로 데이터를 받아올 수 없다.

이 API를 이용하는 웹 애플리케이션은 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바를 CORS헤더를 포함한 응답을 반환해야 한다.

CORS(교차 출처 리소스 공유)를 사용하는 경우

XMLHttpRequest와 Fetch API를 호출하는 경우
웹 폰트(font-face)
webGL 텍스쳐
이미지로부터 추출하는 CSS Shape
예) https://domain-a.com의 프론트엔드 자바스크립트 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우, 보안상의 이유로 스크립트에서 작성한 교차 출처 http 요청이 제한된다.

해결 방법

서버와 클라이언트가 같은 도메인과 포트를 사용한다.
확장 프로그램을 설치한다.

Moesif Origin % CORS Changer

Access-Control-Allow-Origin response 헤더를 추가한다.

  app.get('/data', (req, res) => {
      res.header("Access-Control-Allow-Origin", "*");
      res.send(data);
  });

Node.js 미들웨어에 CORS를 추가한다.
- NPM Link
- npm install --save cors

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

  const app = express();

  const corsOptions = {
      origin: 'http://localhost:3000', // 허락하고자 하는 요청 주소
      credentials: true, // true로 하면 설정한 내용을 response 헤더에 추가 해줍니다.
  };

  app.use(cors(corsOptions)); // config 추가