Develope Me!

[Node.js + Express] CORS 모듈 설치와 프론트엔드 연결 과정(feat.동물소리 API 서버) 본문

JavaScript/Node.js + Express

[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
'JavaScript/Node.js + Express' Related Articles more
Comments