TIL : 210630_수_(CORS)

beablessing·2021년 6월 30일

cors js server

TIL

목록 보기

15/33

오늘 배운것

CORS (cross origin resource sharing)
mini server 구현해보기

CORS

대규모의 웹서브시가 늘어나게 되면서, 외부호출에 대한 니즈가 점점 늘어나게 되었다.
이때 조금더 안전하게 서버간의 교차통신을 하게끔 하기 위한 정책?

서버가 한 origin으로부터 요청을 받으면, 서버에 새로운 HTTP헤더를 추가함으로써 동작함.
side_effect를 일으킬 수 있는 http요청 메서드(GET제외)에 대해,

순서!
1.브라우저가 OPTIONS메소드로 프리플라이트하고,
2.서버의 허가가 떨어지면 실제 요청을 하게 된다 (POST등)

Access-Control-Origin: * 여기서 *표는 모든 도메인을 허용한다는 의미.
Access-Control-Origin: http://foo.example 여기서는 foo.example에 대해서만 허용해준다는 의미.

실제 CORS를 적용한 간단한 서버 구현

브라우저에서 크로스도메인 요청은 기본적으로 제한되어 있음.

모든 도메인 (*) 허용

메소드 GET/POST/PUT/DELETE/OPTIONS

헤더에는 Content-type, accept 만 사용가능

preflight request는 10초까지만 허용 가능함.

http모듈을 사용하고 있다
createServer( (reqest,response) ~

writeHead(200, - );
response.end('-');

요청바디 예시

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

buffer 와 stream

buffer

노드에서는 데이터를 전송할때, buffer에 저장해서
==> 이 저장된 데이터를 우리가 다루며, 전송을 완료하게 된다!!
하지만 모든 base데이터가 버퍼에 저장되기 때문에, 100mb의 베이스데이터를 다루는 경우,
100mb사이즈의 버퍼가 있어야 한다. 데이터가 여러개가 되면 매우 비효율적.
==> 이를 보완해 스트림이 등장

stream

buffer처럼 버퍼에 데이터를 담는다.
단, 버퍼에 담긴 내용을 한번에 보내는 것이 아니라, 조금씩 흘려보낸다!
이때, 스트림으로 보낼때 나눠진 데이터의 조각이 chunk이다.

'data'이벤트를 설정하여 chunk가 들어오면 data라는 배열에 하나씩 Push
data는 스트림에서 데이터 청크의 소유권을 소비자에게 양도할 때마다 이벤트가 발생합니다??
'end' 이벤트 발생을 통해 읽는 것이 끝나면, concat을 통해 하나로 합쳐
end이벤트는 스트림에 더이상 소비할 데이터가 없을때! 즉, 마지막에 작동시킴