Front 서버와 BackEnd 서버가 다른 경우, 동일 클라이언트 세션에서 요청임을 어떻게 판단하나?

> Front 서버와 BackEnd 서버가 다른 경우, 동일 클라이언트 세션에서 요청임을 어떻게 판단하나?

 

CORS(Cross-Origin Resource Sharing), 교차 출처 리소스 공유는 HTTP헤더를 사용하여 실행중인 웹사이트가 다른 도메인의 자원에 접근할 수 있도록 브라우저에 알려주는 체제입니다. 즉, A도메인의 프론트엔드 스크립트가 B도메인을 호출하면 브라우저에서는 기본적으로 요청을 제한합니다.

 

프론트엔드 스크립트에서 Ajax라 불리는 비동기 통신방식을 사용하면, 브라우저에서 제공하는 XMLHttpRequest 함수를 호출하게 됩니다. 동일 출처 정책에 따라 호출받는 서버에서 별도의 허용 설정을 하지 않는한 호출은 차단됩니다. 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야 합니다.

---

node.js BackeEnd환경과 Front프레임워크를 사용하는 경우, Front의 CORS를 Backend에서 열어줘야 자원을 사용할 수 있습니다. 

이렇게 하면, Front의 세션 주기를 Backend와 공유하여 액세스토큰 등을 Backend에서 안전하게 캐시하고 사용할 수 있습니다.

 

브라우저에서 BackeEnd 서버로 통신 시, 자주 사용하는 axois를 예로들면

axios.get('http://localhost:4000' + path, { params: {}, withCredentials: true })
    .then(({ data }) => {
        console.log(data); $('#contents').html(JSON.stringify(data)); 
    })
    .catch(err => {
        console.log(err); $('#contents').html(JSON.stringify(err)); 
    });

Front에서 withCredentials: true로 설정하여 요청 헤더에 쿠키를 포함합니다. Backend는 이 쿠키로 사용자를 식별하고 해당 사용자에 서버 메모리공간을 할당합니다. 

 

node.js 측 에서는 요청자의 origin을 허용함으로 CORS(Cross-Origin Resource Sharing), 교차 출처 리소스 공유를 열어주게됩니다.

const express = require('express');
const session = require('express-session');
const cors = require("cors");

..생략..

app.use(session({
    secret: 'your session secret',
    resave: false,
    saveUninitialized: true,
    cookie: { secure: false }
}));
let corsOptions = {
    origin: 'http://localhost',
    credentials: true
}
app.use(cors(corsOptions));

Front 서버와 BackEnd 서버가 다른 경우, 동일 클라이언트 세션에서 요청임을 확인하기 위해서 CORS를 허용하여 쿠키를 전달하고 세션ID를 사용하게되는 것입니다. 

 

* CORS(Cross-Origin Resource Sharing), 교차 출처 리소스 공유는 웹브라우저에서 제공하는 XMLHttpRequest 함수 사용에 대한 규약이므로 BackEnd에서 호출은 해당 규칙을 적용받지 않습니다. (클라이언트 브라우저에서 스크립트를 이용하여 서버호출 하는 것은 방식과 라이브러리가 달라도 웹브라우저의 XMLHttpRequest함수를 사용하는 것은 동일합니다. 즉, CORS규칙을 동일하게 적용받습니다.)