인프런 커뮤니티 질문&답변

아래 코드는 강사님의 git에서 가져온 코드입니다.
auto

// [Next.js 프로젝트]
// pages/blog/index.js

import { useEffect, useState } from "react";

export async function getServerSideProps(context) {
  // http://localhost:3000 에서의 쿠키를 API 요청에 활용
  const headers = {
    Cookie: context.req.headers.cookie,
  };
  console.log("headers: ", headers);

  const url = "http://localhost:8000/blog/whoami/";
  const response = await fetch(url, { headers });
  const responseText = `상태코드: ${response.status}

${await response.text()}`;

  // props로 전달한 값이 컴포넌트의 속성값으로 주입
  return { props: { message: responseText } };
}

// 웹브라우저에 코드가 다운로드된 후에 수행.
function WhoamiPage({ message: messageSSR }) {
  const [messageCSR, setMessageCSR] = useState("no message");

  // 컴포넌트 초기화 시에 1회만 실행.
  useEffect(() => {
    fetch("http://localhost:8000/blog/whoami/")
      .then((response) => response.text())
      .then((responseText) => {
        setMessageCSR(responseText);
      });
  }, []);

  return (
    <div>
      <h2>whoami</h2>
      <pre>CSR: {messageCSR}</pre>
      <pre>SSR: {messageSSR}</pre>
      <hr />
      <small>by Next.js</small>
    </div>
  );
}

export default WhoamiPage;

강의에선

"fetch api 에서 config 설정도 없이 protocol host 포트 번호를 제거하고 호출합니다..."라고 말씀하셨습니다.

그런데 위 코드는 protocol + host + port 번호까지 전부 적혀 있는 상태이지 않나요?

그런 이유로 해당 코드는 localhost:3000/blog에서 CORS 오류가 발생합니다.

저 코드를 사용하신 이유를 잘 모르겠어요.