Develope Me!
[Node.js + Express] CORS 모듈 설치와 프론트엔드 연결 과정(feat.동물소리 API 서버) 본문
[Node.js + Express] CORS 모듈 설치와 프론트엔드 연결 과정(feat.동물소리 API 서버)
코잘알지망생 2024. 3. 7. 15:22
CORS 이슈
HTML 파일로 서버에 요청을 했을 때 보안상의 문제로 CORS가 없으면 차단되는 경우가 있는데 이럴 땐 npm을 이용해서 cors 모듈을 설치해준다.
1. cors 설치
$ npm install cors
2. cors 사용 (npm 홈페이지 참고)
var express = require("express");
var cors = require("cors");
var app = express();
app.use(cors());
모든 요청을 허용시켰지만 app.use(cors())에 조건을 넣어서 허용할 수 있는 요청 조건을 설정해줄 수도 있다.
프론트엔드 연결하기
백엔드와 프론트를 연결해보자!
var express = require("express");
var cors = require("cors");
var app = express();
const port = 3000;
app.use(cors());
// 동물 소리 API 서버 만들기
app.get("/sound/:name", (req, res) => {
// 중괄호 안에 key 값을 입력
// 만약에 dog 라는 값이 입력 됐다면 json 형식으로 {name : dog}로 들어옴
const { name } = req.params;
console.log(name);
if (name == "dog") {
res.json({ sound: "멍멍" });
} else if (name == "cat") {
res.json({ sound: "야옹" });
} else if (name == "pig") {
res.json({ sound: "꿀꿀" });
} else {
res.json({ sound: "등록되지 않은 동물입니다." });
}
});
app.listen(port);
index.js파일에 동물을 입력했을 때 동물의 소리를 출력하는 API 서버를 만든다.
테스트를 위해 생성해둔 폴더에 index.html 폴더를 추가한다.
<!DOCTYPE html>
<html lang="ko">
<body>
<h1>원하는 동물의 소리를 출력해드립니다. (영어로 입력해주세요.)</h1>
<h2 id="sound"></h2>
<input id="name" type="name" />
<button onclick="getSound()">제출</button>
<script>
async function getSound() {
const name = document.getElementById("name").value;
const response = await fetch(`http://localhost:3000/sound/${name}`);
const jsonData = await response.json();
console.log(jsonData);
document.getElementById("sound").innerHTML = jsonData.sound;
}
</script>
</body>
</html>
fetch 요청으로 api 요청을 보내고 사용자가 입력한 input 값을 확인하고 jsondata에 sound 키의 값을 html 태그에 넣어준다.
*문자열에 백틱 태그('`')를 사용하고 ${변수명}을 써주고 값을 받아올 수 있다.
*fetch api 사용(참고: https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)
html 파일을 우클릭 > Reveal in File Explorer or Shift+Alt+R 하여 HTML 파일을 열어 값을 입력해주면
클라이언트가 입력한 값을 확인하여 원하는 동물의 소리가 정상적으로 출력되는 것을 확인할 수 있다.
+ 만약 백단에서 app.use(cors())를 주석 처리 해준다면...?
CORS 정책을 위반 했다는 에러가 뜨기 때문에 해당 html에 접근할 수 있도록 설정해줘야한다.
'JavaScript > Node.js + Express' 카테고리의 다른 글
[Node.js + Express] Express-Session-Auth / 세션(express session), 세션 저장소(session-file-store) (0) | 2024.03.21 |
---|---|
[Node.js + Express] npm 패키지를 통한 express 모듈 설치와 간단한 api 테스트 (0) | 2024.03.06 |