TIL Day 38 : HTTP 트랜잭션 해부

hyeongirlife·2021년 11월 24일

TIL

목록 보기

40/90

CORS 리뷰

CORS : 교차 출처 리소스 공유

보통 서버는 보안상의 이유로 다른 origin이 보내는 HTTP 요청을 제한하는데 이러한 문제는 최근 Github, Youtube 등 다양한 서버를 사용해야 하는 추세가 되며 다른 origin을 사용해야 하는 경우가 많아졌다. 이 때 CORS라는 개념이 생겼다.

CORS 순서

서버와 origin이 다른 클라이언트가 OPTIONS HTTP 메소드를 이용해 다른 도메인의 리소스로 HTTP 요청을 보내, 실제 요청이 전송하기에 안전한지 확인한다. 이를 preflight라 한다.
preflight가 통과하면 본 HTTP 메소드 요청이 가능해진다. 여기서 메소드에 따라 요청(request)에 필요한 요소들이 달라진다.
데이터를 요청하고 응답할 시 응답body를 전송하기 전 상태코드를 먼저 작성해줘야 한다.
데이터에 오류가 있다면 오류처리한다.

서버에 요청 시 HTTP 메소드 별 특징

GET : request의 요청시 header, url이 필요하다. response 때는 body가 필요하다.
POST : request의 요청시 header,url,body가 필요하다. response 때도 body가 필요하다.
PUT : request의 요청 시 header,url,body가 필요하다.
DELETE : request의 요청 시 header,url가 필요하고 body는 반드시 필요한 것은 아니다.

서버에 요청하는 과정 정리

const http = require('http');

const PORT = 5000;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );

  const { method, url } = request
  // OPTIONS 메소드를 통과할 경우 본 요청 시작가능.
  if (method === 'OPTIONS') {
    response.writeHead(200, defaultCorsHeader);
    response.end('SUCCESS');
  }
// 본 요청. 메소드가 POST,urlpath가 /lower라면 문자열 데이터를 받아서 toLowerCase() 함수를 적용해 응답한다.
  if (method === 'POST') {
    if (url === '/lower') {
      let data = ''
      request.on('data', value => {
        data += value
      })
      request.on('end', () => {
        data = data.toLowerCase()
        response.writeHead(200, defaultCorsHeader);
        response.end(data);
        console.log(data)
      })
//urlpath가 /upper 라면 문자열 데이터를 받아서 toUpperCase() 함수를 적용해 응답한다.
    } else if (url === '/upper') {
      let data = ''
      request.on('data', value => {
        data += value
      })
      request.on('end', () => {
        data = data.toUpperCase()
        response.writeHead(200, defaultCorsHeader);
        response.end(data);
        console.log(data)
      })
    }
    else {
      response.writeHead(404, defaultCorsHeader)
      response.end("다시시도해보세요")
    }
  }
})

serve 유틸리티 사용하기

위에 작성한 코드는 5500번 포트를 사용하는 클라이언트에서 5000번 포트를 사용하는 서버에 HTTP 정보를 요청하는 과정이었다.
serve를 사용해 3000번 포트를 연결하여 서버에 정보를 요청하는데, 만약 Content-type이 application.json이 아닌 text/plain인 경우 preflight를 요청하지 않았다. 그 이유는 MDN에서 보면 simple-request를 요청하는 헤더이기 때문이다.