const http = require("http"); // 사용할 모듈을 불러와 준다.
const PORT = 3005; // 포트번호가 된다.
const ip = "localhost"; // ip가 된다.
const server = http.createServer((request, response) => {
if (request.method === "OPTIONS") { //cors 설정을 돌려줘야 한다.
response.writeHead(200, defaultCorsHeader);
response.end();
}
if (request.method === "POST" && request.url === "/") { //메서드가 POST이며, URL이 홈일때,
let body = [];
request
.on("data", (chunk) => {
body.push(chunk);
})
.on("end", () => {
body = Buffer.concat(body).toString().trim(); // 양끝의 공백을 지운다.
response.writeHead(200, defaultCorsHeader);
response.end(body);
});
} else {
response.writeHead(400, defaultCorsHeader); // 아닐경우 에러를 보여주자.
response.end();
}
});
텍스트를 쓰면 양 끝의 공백(' ')을 지워주는 아주 쓸모없지만 서버를 거쳐서 뭔가 작업 후에 우리에게 보여주는 예시를 만들었다.
HTML 파일과 App.js파일은 생략.
서버를 생성한다. HTTP모듈을 이용하는 것이다.
그리고 서버가 들어갈 변수를 만들어 생성해 주고, 그에 필요한 PORT, IP를 설정해 준다.
그리고 알맞은 내용을 넣어주고, 응답을 끝내는 것을 잊지 않는다.
그리고 마지막으로 'node server/서버가 담긴 자바스크립트 파일. js'를 터미널에 입력한 후에, 설정한 URL을 통해서 웹을 열어 보면 생성된 서버를 즐길 수 있다.
2. CORS?
Cross Origin Resource Sharing을 줄인 것이다.
우리가 주소가 다른 서버로 무언가 요청을 보낼 때 그 요청을 막아버리는 경우가 있다.
이는 위의 사진에서 보다시피 웹 사이트에서 AJAX요청을 보낼 때, 브라우저 자체가 신뢰되지 않은 사이트에게 요청을 보내는 것을 막아주는 역할을 한다. 위의 사진처럼 따라간 여자가 알고 보니 머리긴 남자였을 수 도 있으니 말이다. 와! 생명의 은인!!
3. SOP
Same Origin Policy를 줄인 것이다.
오직 같은 URL들끼리 API 등의 접근을 가능하게 한다는 '정책(Policy)'이다.
즉, 이러한 정책으로 인해 우리는 다른 웹 사이트에서 요청들이 막히게 될 것이고, 그것에 '예외'를 만들어 주는 것이 바로 CORS이다.
만약, 무언가 불순한 의도를 가진 웹사이트에 실수로 접속했다. 그때, 그 웹사이트의 자바스크립트에 코드들이 받아와 진다. 그 코드들이 자신들의 서버로 나의 개인정보와 같은 정보들을 자신들의 서버로 전송시켜 버린다면? 이와 같은 일들을 막기 위해 최선을 다하고 있는 것일 뿐이니 자꾸 에러 뜬다고 너무 미워하지 말자.
4. 그래서 어떻게 연결할 것인가?
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,
};
위와 같은 방법으로 OPTION을 넣어서 예외를 만들어 준다.
받는 곳의 IP주소나 사용하는 프로토콜 등이 들어있는 Header가 다른 서버에 요청이 보내질 때, Origin을 추가하게 된다. Origin에는 요청하는 쪽의 scheme과 포트, 도메인 등이 들어가 전송을 하게 된다. 이것을 먼저 확인하고 요청을 받을지 안 받을지를 결정해 주게 되는 것이다.
이때, PUT, DELETE 등은 서버에 데이터에 직접적으로 영향을 줄 수 있기 때문에 진짜 요청을 보내기 전, 'Preflight'를 먼저 보내보고 요청이 허용된 안전한 요청인지 확인을 한 후에 진짜 요청을 보낸다.
5. 번외편 : Nodemon을 사용해 보자.
nodemon은 서버 코드를 수정한 후에 다시 서버를 껐다 켤 필요 없이, 자동으로 서버를 다시 껐다 켜주는 친구이다. 마치 리액트나, VS code Live Server처럼 말이다.
어떻게 사용하나요?
터미널에 'npm install -g nodemon'을 입력해 설치한다. (-g는 글로벌 설정이다. 이 작업 말고 모든 폴더와 작업에서도 사용할 수 있게 설치하는 것이다.)
그리고 터미널에 'nodemon server/서버가 담긴 자바스크립트 파일. js'을 입력해 켜주면 된다.
이것마저 귀찮다! 하신다면 package.json파일 안에 'scripts' 객체 안에 원하는 명령어(나는 'start'로 한다)를 설정해 준다.
//Ex) 아래 코드는 package.json 파일에 있는 코드이다.
"scripts": {
"start": "nodemon server/서버가 담긴 자바스크립트 파일.js",
},
// 이제 npm start를 입력해서 nodemon을 바로 실행하자!
