Cors
CORS
Cross-Origin Resource Sharing 즉 한국말로 직역하면 교차 출처 리소스 공유 라고 한다
처음 전송되는 리소스의 도메인과 다른 도메인으로부터 리소스가 요청될경우 해당 리소스는 cross-origin HTTP 요청에 의해 요청됩니다 ⇒ 일단 너무 어렵게 써놔서 넘어가고 아래를 보자
출처(Origin)란 무엇인가?
서버의 위치를 의미하는 URL들은 하나의 문자열같아보이지만 사실 여러개의 구성요소로 이루어져있다
저기에 :3000 같은 포트번호까지 모두합친 것을 출처(origin) 이라고한다. 물론 포트는 생략가능
CORS는 어떻게 동작될까?
기본적으로 웹 클라이언트 어플리케이션이 다른 출처를 가진 리소스를 요청할때는 HTTP 프로토콜을 사용하여 요청을 보내게 되는데
이때 브라우저는 요청 헤더에 Origin 이라는 필드에 요청을 보내는 출처를 함께 담아보낸다
Origin: https://kaen7.github.io/
이후 서버가 요청에 응답할때 응답 헤더에 Access-Control-Allow-Origin 이라는 값에 이 리소스를 접근하는 것이 허용된 출처를 내려주고
응답 받은 브라우저는 자신이 보냈던 요청과 Origin 서버가 보내준 응답의 Access-Control-Allow_Origin 을 비교한뒤 유효한 응답인지 아닌지를 결정한다
Preflight Request
Preflight Request(프리플라이트) 방식은 우리가 일반적으로 웹 어플리케이션을 개발할 때 자주 마주치는 시나리오이다
이게 괜찮은지? 미리 검사하러 보내는 시제품 같은 역할
이 시나리오에 해당할때 브라우저는 요청을 한번에 보내지 않고 예비와 본 요청으로 나눠서 서버로 전송한다
바로 이 예비 요청을 Preflight 라고 부르며 이 예비 요청에는 HTTP 메소드 중 Options 메소드가 사용된다
예비요청의 역할은 본 요청을 보내기 전에 브라우저 스스로 이 요청을 보내는것이 안전한지 확인하는 것이다
node server
node server/서버파일.js
하게 되면 어떤 포트에 서버가 열리게 됩니다 개신기함 ㄹㅇ
버퍼와 스트림
노드에서는 데이터를 전송할때 버퍼에 저장하고 우리는 이 버퍼를 사용해서 데이터를 전송합니다
버퍼에서는 concat 이나 alloc: 빈 버퍼를 생성 을 주로 사용한다
버퍼의 단점은 메모리 소비입니다 다수를 사용해야되는 상황에서는 메모리문제가 발생하게 됩니다
그래서 나온것이 스트림 입니다 한번에 왕창 때려박는게 아니고 찔끔찔끔 전달하는 방식입니다
스트림으로 보낼때 나눠진 조각을 chunk 라고 합니다
data 라는 이벤트를 설정해서 chunk 가 들어오면 dat라는 배열에 하나씩 push 합니다
const server = http.createServer((request, response) => {
if(메소드가 options) {
CORS 설정을 돌려줘야 한다
}
if(메소드가 POST고, url이 upper면) {
대문자로 응답을 돌려줘야 한다
}
else if(메소드가 POST고 url이 lower면) {
소문자로 응답을 돌려줘야한다
}
else {
에러처리
}
})
const http = require("http");
const PORT = 5000;
const ip = "localhost";
const server = http.createServer((request, response) => {
let body = [];
request
.on("data", (chunk) => {
body.push(chunk);
})
.on("end", () => {
body = Buffer.concat(body).toString();
// 여기서 `body`에 전체 요청 바디가 문자열로 담겨있습니다.
//upper, lower 두 엔드포인트 구현
if (request.method === "OPTIONS") {
//cors설정을 돌려주어야 한다
response.writeHead(200, defaultCorsHeader);
response.end();
}
if (request.method === "POST" && request.url === "/upper") {
//대문자로 응답
response.writeHead(200, defaultCorsHeader);
response.end(body.toUpperCase());
} else if (request.method === "POST" && request.url === "/lower") {
//소문자로 응답
response.writeHead(200, defaultCorsHeader);
response.end(body.toLowerCase());
} else {
// error처리 bad req
response.writeHead(400, defaultCorsHeader);
response.end();
}
});
console.log(
`http request method is ${request.method}, url is ${request.url}`
);
// response.writeHead(200, defaultCorsHeader);
// response.end('hello mini-server sprints');
});
server.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});
const defaultCorsHeader = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Accept",
"Access-Control-Max-Age": 10,
};
참조
| [HTTP 트랜잭션 해부 | Node.js](https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/) |
| [MIME 타입 - HTTP | MDN](https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types) |