CORS
서버에서 CORS가 클라이언트의 요청을 판단하는 조건은 4가지다.
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
Access-Control-Max-Age
보통 origin이 같은 경우에만 CORS를 허용한다.
same-origin은 엔드포인트가 같은 경우를 말한다.
위의 사진과 같이 나의 네이버 블로그 메인화면에서 네이버 메인화면을 fetch 하면 CORS에 위반한다고 알려준다. 엔드포인트가 다르다면 CORS를 허용할 수 없다. 이때는 Access-Control-Allow-Origin = '*' 처리를 해줘야 모든 주소에 대해 CORS를 허용할 수 있다.
스프린트에서도 serve 유틸리티를 통해 http://localhost:3000 서버를 열고
http://localhost:4999 서버에 CORS요청을 했는데 성공했다. 그 이유는 위에서 말한 것 처럼 모든 origin을 허용했기 때문이다.
추가적으로 buffer에 대해서 학습했다.
const http = require('http')
const ip = 'localhost'
const port = 4999
const server = http.createServer((requerst,response)=>{
const {method,url} = request
if(method === 'OPTIONS'){
res.writeHead(200,defaultcorsHeader) // defalutcorsHeader 작성은 생략하겠다.
res.end('CORS 성공!')
}
if(method === 'POST' && url === '/upper'){
let body = []
response.on('data',(chunk)=>{
body.push(chunk)
}).on('end',()=>{
body = Buffer.concat(body).toString()
res.writeHead(201,defaultcorsHeader)
res.end(body.toUpperCase())
})
}바닷가를 떠올렸을 때, 데이터는 A라는 출발정메서 B라는 도착점으로 흘러가는데 하나의 데이터가 조각으로 나눠져 움직이게 된다. 조각 하나하나를 buffer라고 한다. 그리고 강의 폭이 좁아 buffer들이 천천히 움직이게 되면 대역폭이 커져서 데이터 송신이 늦어진다고 생각할 수 있다.
그리고 코드에서 보면 데이터 조각이 chunk라는 이름으로 body에 쌓이고 있고, 모든 chunk가 도착하면 데이터와 완성되고 이를 'end'를 통해 보낼 수 있게된다. buffer가 도착할 때마다 'end'이벤트가 실행되는게 아니라는 걸 기억하자.
