[JS] HTTP 트렌젝션 해부 및 CORS

서버 생성

const http = require('http');

const server = http.createServer((request, response) => {
    // 작업 진행
})

const server = http.createServer() ;
    server.on('request', (request, response) => {
        작업 실행
    })
})

메서드, URL, 헤더

const {method, url} = request;
const { headers } = request;
const userAgent = headers['user-agent'];

여기서 method는 항상 일반적인 HTTP 메서드/동사가 될 것입니다. url은 전체 URL에서 서버, 프로토콜, 포트를 제외한 것으로, 세 번째 슬래시 이후의 나머지 전부라고 볼 수 있습니다.

클라이언트가 어떻게 헤더를 설정했는지에 관계없이 모든 헤더는 소문자로만 표현된다는 것을 기억해야 합니다. 이는 어떤 목적이든 헤더를 파싱하는 작업을 간편하게 해줍니다.

요청 바디

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});

오류 검증

request.on('error', (err) => {
  // 여기서 `stderr`에 오류 메시지와 스택 트레이스를 출력합니다.
  console.error(err.stack);
});

Uncaught (in promise) SyntaxError: Unexpected token h in JSON at position 0

preflight

CORS

프론트엔드레이어 & API 서버 레이어

웹프론트엔드 사이트 || 서버 따로 만든다.

프론트엔드에서 다른 도메인 위치한 API로 요청을 넣어야 하는 사항이 생긴다.
원래는 도메인이 다르면 요청을 주고받을 수 없게 만드는게 웹브라우저 정책

CORS 방식을 통하면 서로 요청을 주고 받을 수 있게 되었다.

옛날

Web Browswer >>>>>>>>>>>>>>>> Server
Request

Web Browswer <<<<<<<<<<<<<<<< Server
HTML page

하나의 서버에서 비즈니스 로직과 HTML 페이지 빌드를 같이하는게 일반적이었다.
즉, 모든게 같은 도메인에서 일어났다. 중간에 웹사이트에서 서버로 자스로 추가요청을 넣는다고해도 같은 도메인에서 요청을 넣는 일이었다.

웹브라우저에서 같은 도메인이 아니면 요청을 막는 선택을 하였다.

그러다가 웹사이트에서 할 수 있는일이 많아진다. 문서만 제공하는게 아니고 무언가 어플리케이션이 만들어지기 시작했다.
이러다 보니 점점 정책이 불편해 졌다.

웹사이트에서 날씨를 보여주는 기능을 만들었다고 생각하자
우리는 웹 브라우저에서 웹 서버로 요청하고

buffer 16진수로 된 데이터인데 이걸 다모으면 영상이 된다.