CORS

Hyunji·2022년 2월 10일
0

공부

목록 보기
8/35
post-thumbnail

CORS 란 뭘까?

Cross Origin Resource Sharing 의 약자로 도메인 및 포트가 다른 서버로 클라이언트가 요청했을 때 브라우저가 보안상의 이유로 API를 차단하는 문제이다.
예를 들자면 클라이언트는 3000 포트로 서버는 8080 포트로 서버를 띄웠을 때 또는 로컬 서버에서 다른 서버로 호출할 때 발생하게 된다.

CORS를 허용했을 때 브라우저가 CORS를 처리하기 위한 방법 (접근제어 시나리오)

simple requests

메인 url request 를 보내면서 CORS를 허용하는지 확인한다.

preflighted requests

옵션 메소드(option method)를 통해서 서버한테 미리 확인하고, 허용하면 api요청을 수행한다. 허용 안하면 그대로 통신이 끊킨다.

CORS의 필요성

기본적으로 보안상의 이유로 브라우저는 Same-origin policy(SOP, 동일 출처 정책)을 따른다. 그렇기 때문에 XMLHttpRequest 와 fetch API는 동일 출처 정책에 따라 동일한 출처의 리소스만을 요청할 수 있다.

하지만 웹 애플리케이션을 구현하다 보면, 다른 출처에 있는 리소스를 요청하는 경우가 많다. SPA(Single Page Application)로 구현된 웹 애플리케이션에서 다른 도메인을 가진 API 서버에 요청하는 경우는 매우 비일비재 한다. 또한, web font를 요청하는 경우도 마찬가지이다.

cross-origin 요청을 필요한 경우가 많아지고 있기 때문에, 이를 안전하게 처리할 정책이 필요했다. 그래서 CORS가 등장한 것이다. CORS는 cross-origin 요청을 제한적으로 허용함으로서 좀 더 안전하게 cross-origin 요청을 처리할 수 있는 정책이다.


CORS 에러 해결 방법

Node.js에서 CORS설정하기

CORS 패키지 설치

우선 CORS 미들웨어를 사용하기 위해 패키지를 설치한다

npm i cors

모든 CORS Request 허용하기

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

app.use(cors()); // CORS 미들웨어 등록!

// ...

특정 URL만 허용하고 싶다면?

const express = require('express');
const cors = require('cors');
const app = express();
const port = 3000;

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

app.use(cors(corsOptions));

// ...

Access-Control-Allow-Origin response 헤더를 추가하는 방법도 있다.

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

어떤 특정 요청에만 적용하고 싶다면 cross-origin을 허락하는 헤더를 추가해 문제를 해결할 수 있다.


출처:
https://expressjs.com/en/resources/middleware/cors.html
https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
https://firework-ham.tistory.com/70
https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/
https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/

profile
성장중인 개발자

0개의 댓글