[6] CORS 문제

CORS란 ?

브라우저에서만 가지고있는 CORS정책이 있습니다.

클라이언트와 서버가 동일한 도메인에있다면 리소스를 제약없이 주고받을수 있지만,

다른 도메인에있다면 원칙적으로는 어떤 데이터도 주고받을 수 없습니다.

이것을 가능하게 하려면 header에 Access-Control-Allow-Origin을 명시해 주어야합니다.

CORS 문제 해결하기

서버와 클라이언트같에 http통신시 도메인이 다르다면 원칙적으로 어떠한 리소스도 받을 수 없다.

이를 해결하기 위해서는, 서버에서 데이터를 보내줄때 'Access-Control-Allow-Origin'로 특정 도메인을 허용해주어야한다.

'*'을 해주면, 모두 허용한다.

유용한 미들웨어로 cors 미들웨어가 있다.

server.js

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
  next();
});

app.get("/", (req, res) => {
  res.json("hi");
});

index.html

res.send()는 text형태이기 때문에 받아서 text()로 파싱하고 res.json()을 한 경우에는 json형태로 파싱해주어야한다.

<h1>Client</h1>
<script>
  fetch("http://localhost:8080", { method: "GET" })
    .then((data) => data.text())
    .then((data) => console.log(data));
  // .then((data) => data.json())
  // .then((data) => console.log(data));
</script>