CORS - 크로스 도메인 소스 공유 패키지

주소가 http://im.frontend 인 프런트 서버에서

주소가 http://im.backend/server 인 API 서버로 데이터 요청 시 만나게 되는 문제를 해결해 주는 패키지입니다.

 

expressjs.com/en/resources/middleware/cors.html

Express cors middleware

 

서버 간 통신 시 도메인이 다를 경우, 브라우저 보안 정책으로 콘솔에 빨간색 에러를 뱉습니다.

"image와 같은 예외 항목 몇 가지를 빼고는 옳지 않아~"

 

Cors의 짧은 소스를 보면 크로스 도메인을 허용하는 header 구문을 붙여 전달하는 역할을 하는 것 같습니다.

 

설치

npm install --save cors

 

적용

// server.js or app.js or any main script

var express = require("express");
var cors = require("cors"); //<---------- 추가

 

 

Use case

default 전체 허용

var express = require("express");
var cors = require("cors");
.
.
var app = express();
.
.
app.use(cors());  //<-- 모든 도메인의 요청 허용

특정 도메인만 허용

.
.
var app = express();
.
.
const corsOptions = {
  origin: "http://127.0.0.1:3000",
  credentials: true,
};
app.use(cors(corsOptions));
.
.

특정 Route만 허용

.
.
var app = express();
.
.
app.get('/user/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})
.
.

특정 도메인의 특정 Route만 허용

.
.
var app = express();
.
.
var corsOptions = {
  origin: 'http://im.frontend',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
}

app.get('/users/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for only im.frontend.'})
})
.
.

클라이언트 측에서 proxy 패키지로 블라블라~ 자료를 참고했던 삽질의 기억에 비해 CORS는 너무 쿨했습니다.

그도 그럴 것이 100% Open API가 아닌 이상 요청하는 입장에서 권한을 마음대로 얻을 수 없는 것이고

허용 권한을 주고 안주고는 집주인이 현관문 단속하는 것과 같으니까요.