[HTTP, Node.js] CORS, api 서버 기초

기본적으로 SOP를 따라 다른 출처 리소스를 제한하지만, CORS를 사용해 접근 권한을 얻을 수 있음

 

SOP(Same-Origin Policy, 동일 출처 정책)

: 모든 브라우저가 기본적으로 적용 중

같은 출처(프로토콜+ 호스트+ 포트)의 리소스만 공유 가능함

-> 해로울 수 있는 문서를 분리함으로써 공격(해킹 등)받을 수 있는 경로를 줄여줌

 

다른 출처의 리소스를 받아오고 싶다면 CORS 사용

CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)

추가 HTTP 헤더를 사용하여 다른 출처의 특정 자원에 접근할 수 있는 권한 부여

 

 

CORS 동작 방식

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

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

-> 실제 요청을 보내기 전에 권한 확인 후 요청을 받아들일지 결정하기 때문에 리소스 측면에서 효율적임

(실행되서는 안되는 Cross-Origin 요청을 방지해 CORS에 대비되어 있지 않은 과거에 만들어진 서버를 보호)

 

Preflight 요청

3 Preflight 응답 단계에서 

- 접근 권한이 있다면 응답 헤더에 "Access-Control-Allow-Origin": "url주소"가 담겨서 오고

- 접근 권한이 없다면 CORS 에러 발생

 

2. 단순 요청 Simple Request

아래 조건을 만족하면 프리플라이트 요청을 생략(-> 모두 만족시키기 어려움)

- GET, HEAD, POST 메서드 중 하나일 것

- 자동으로 설정되는 헤더 외에는 Accept, Accept-Language, Content-Language, Content-Type 헤더 값만 설정할 것

(Content-Type 헤더에는 값으로 application/x-www-form-urlencoded, multipart/form-data, text/plain만 허용함)

 

3. 인증 정보를 포함한 요청 Credentialed Request

요청 헤더에 인증 정보를 담아 보냄

 

출처가 다를 경우 별도 설정(프론트, 서버 모두)을 하지 않으면 쿠키를 보낼 수 없음

-> 민감한 정보이기 때문

 

- 프론트: 요청 헤더 withCredentials: true

- 서버: 응답 헤더 Access-Control-Allow-Credentials: true

(모든 출처를 허용한다는 와일드카드*로 설정하면 에러 발생,

인증 정보를 다루기 때문에 출처를 정확히 설정해주어야 함)

 

CORS 설정하기

 

nodemon 사용하기(서버 수정사항을 저장하면 바로 업데이트 해주는 라이브러리)

1. 패키지 설치하여 사용

npm install nodemon
nodemon server/basic-server.js

// package.json script에 아래 추가
// "start": "nodemon server/basic-server.js"
npm start

2. 설치하지 않고 npx로 실행

npx nodemon server/basic-server.js

 

node.js 서버 기초

서버 생성

const http = require('http');

const server = http.createServer((request, response) => {
  // 여기서 작업이 진행됩니다!
});

// 위를 풀어서 기재
const server = http.createServer();
server.on('request', (request, response) => {
  // 여기서 작업이 진행됩니다!
});

 

request와 response는 객체임(ReadableStream, WritableStream)

request {
  method, // HTTP
  url,
  headers,
  ...
}

response {
  statusCode, // 상태 코드, 작성 안할 경우 기본값 200
  setHeader, // 헤더 하나 설정(키,값), setHeader를 여러개 작성할 경우 마지막 것만 남음
  writeHead, // 객체 안에 헤더 여러개 설정 가능(상태 코드, {키:값}) 
  write, // 문자열로 html 요소 한줄 한줄 작성
  end, // 문자열로 html 요소 전체 작성. 바디 닫기
  pipe, // 리퀘스트 전체를 리스폰스에 전달(메서드, url, 헤더, 바디)
  ...
}

 

요청 바디 받기

  ...
  let body = [];
  request.on('error', (err) => { // 에러 캐치
    // 여기서 `stderr`에 오류 메시지와 스택 트레이스를 출력
    console.error(err.stack);
  }).on('data', (chunk) => { // chunk는 buffer임(임시 메모리)
    body.push(chunk);
  }).on('end', () => {
    body = Buffer.concat(body).toString();
    // 여기서 `body`에 요청 바디가 문자열로 담기게 됨
  })
}).listen(8080); // 이 서버를 활성화하고 8080 포트로 받음

on(jquery method) 첫번째 인자인 이벤트가 실행되면, 두번째 인자로 받은 함수 실행

data 스트림에 이벤트리스너를 연결하면 스트림이 흐름 모드로 전환되며 데이터를 즉시 전달

end 스트림에 더 이상 소비될 데이터가 없을 때 이벤트 발생

 

응답

response.on('error', (err) => {
  console.error(err);
  });

response.statusCode = 200;
response.setHeader('Content-Type', 'application/json');
// 위 두 줄은 다음 한 줄로 대체할 수도 있습니다.
// response.writeHead(200, {'Content-Type': 'application/json'})

const responseBody = { headers, method, url, body };

response.write(JSON.stringify(responseBody));
response.end();

end 메서드 

- 더 이상 데이터가 기록되지 않는다는 신호

- 상태코드, 헤더, 바디 이후에 메서드를 불러와야함

 

 

예제 전체

// 예제 전체
const http = require('http');

http.createServer((request, response) => {
  const { headers, method, url } = request;
  let body = [];
  request.on('error', (err) => {
    console.error(err);
  }).on('data', (chunk) => {
    body.push(chunk);
  }).on('end', () => {
    body = Buffer.concat(body).toString();
    // 여기서부터 새로운 부분입니다.

    response.on('error', (err) => {
      console.error(err);
    });

    response.statusCode = 200;
    response.setHeader('Content-Type', 'application/json');
    // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다.
    // response.writeHead(200, {'Content-Type': 'application/json'})

    const responseBody = { headers, method, url, body };

    response.write(JSON.stringify(responseBody));
    response.end();
    // 주의: 위 두 줄은 다음 한 줄로 대체할 수도 있습니다.
    // response.end(JSON.stringify(responseBody))

    // 새로운 부분이 끝났습니다.
  });
}).listen(8080);

 

에코 서버

: 요청받은 데이터를 그대로 응답으로 돌려보내는 서버

 

에코 서버에서 pipe 메서드 사용하기

const http = require('http');

http.createServer((request, response) => {
  if (request.method === 'POST' && request.url === '/echo') {
    let body = [];
    request.on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString();
      response.end(body);
    }); // 위 6줄은 request.pipe(response)로 대체 가능
  } else {
    response.statusCode = 404;
    response.end();
  }
}).listen(8080);

 

 

 

 

* 참조

HTTP 트랜잭션 해부

 

 

 

 

22.12.08

코스 S2U10 CORS 진행중