CORS 이슈 해결

html파일 자체에서 보낸 요청을 막히는 이슈가 발생하곤 함

이건 cors설정을 통해 해결할 수 있음

npm에서 cors관련 모듈이 있는데

터미널에 cors를 설치하고

npm i cors

설치 후, 아래와 같이 사용을 명시해주면

문제가 해결됨.

cors() 괄호 안에, 어디서 요청하는건 허용하고, 어디서 요청하는건 허용하지 않겠다는 옵션을 추가할 수도 있음


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>API CORS</title>
  </head>
  <body>
    <h1 id="sound"></h1>
    <input id="name" type="text" />
    <button onclick="getSound()">API 요청</button>
    <script>
      function getSound() {
        const name = document.getElementById("name").value;
        fetch(`http://localhost:3000/sound/${name}`)
          .then((response) => response.json())
          .then((data) => {
            console.log(data);
            document.getElementById("sound").innerHTML = data.sound;
          });
      }
    </script>
  </body>
</html>

index.js를 키고 실행하면

html파일에서 요청을 해도 받아주는데, 이는

cors설정을 했기 떄문임