Local에서는 실행이 잘되는데 vercel로 배포한 링크에서는 지도가 안뜹니다


이렇게 오류가 발생해서

여기 링크에 나온것처럼

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              var script = document.createElement('script');
              script.src = '//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_KEY}&libraries=services&autoload=false';
              document.body.appendChild(script);
            `,
          }}
        />
        <Main />
        <NextScript />
      </body>

이런식으로 작성을 해줬는데 여전히 출력이 안됩니다…
localhost:3000에서는 잘되었는데 vercel로 배포한 링크에서만 안됩니다.
이유가 뭘까요

다른 프로젝트에서도 nextjs에서 vercel로 배포해보았는데 제대로 작동되는 headers와의 차이점은 Sec-Fetch-Mode가 cors 인 것 같습니다.
image

다른 프로젝트에서는 Sec-Fetch-Mode가 no-cors로 되어있었습니다.

어떻게 해야할까요ㅠㅠ

vercel 또는 next 설정으로 인해 cors가 적용된 걸로 보입니다.
개발자 도구로 script에 crossorgin 같은 속성이 추가되어 있는지 확인해서 기본 script 태그로 import 해보시고
vercel 배포 시 cors 허용으로 설정해서 배포한 다음 확인해 주세요.
https://vercel.com/guides/how-to-enable-cors

올려주신 링크에서 next.js cors 설정방법에 나와있는 코드를
next.config.js 에 적용시켰더니 제대로 작동되었습니다.

답변 감사합니다!!!

1개의 좋아요