[SEB_FE_44] Web Server(1) - CORS

오늘 배운 주제

---

• CORS

오늘 배운 내용

---

• SOP

Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻

한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’라는 정책

• CORS

Cross-Origin Resource Sharing의 줄임말로 교차 출처 리소스 공유를 뜻

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.

• 프리플라이트 요청 (Preflight Request)

실제 요청을 보내기 전, OPTIONS 메서드로 사전 요청을 보내 해당 출처 리소스에 접근 권한이 있는지부터 확인하는 것

• CORS 설정 방법

Node.js 서버

const http = require('http');

const server = http.createServer((request, response) => {
// 모든 도메인
  response.setHeader("Access-Control-Allow-Origin", "*");

// 특정 도메인
  response.setHeader("Access-Control-Allow-Origin", "https://codestates.com");

// 인증 정보를 포함한 요청을 받을 경우
  response.setHeader("Access-Control-Allow-Credentials", "true");
})

• 서버 생성

const http = require('http');

const server = http.createServer((request, response) => {
  // 여기서 작업이 진행됩니다!
  const { method, url } = request; // 메서드, URL, 헤더
  
  let body = []; // 요청 바디
  request.on('data', (chunk) => {
    body.push(chunk);
  }).on('end', () => {
    body = Buffer.concat(body).toString(); 
    // 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
});
});

오늘의 과제

---

Mini Node Server

• basic-server.js

const server = http.createServer((request, response) => {
  const { method, url } = request;
  if(method === "OPTIONS") {
    response.writeHead(200, defaultCorsHeader);
    response.end();
  }
  if(method === "POST") {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString()
      if(url === "/upper") {
        response.writeHead(201, defaultCorsHeader);
        response.end(body.toUpperCase());
      } else if (url === "/lower") {
        response.writeHead(201, defaultCorsHeader);
        response.end(body.toLowerCase());
      } else {
        response.writeHead(404, defaultCorsHeader);
        response.end();
      }
    })
  }
});