next.js kakao map api 사용 중 cross origin error

// next.config.js

const nextConfig = {
  reactStrictMode: true,
  async headers() {
    return [
      {
        // matching all API routes
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
          },
          {
            key: "Access-Control-Allow-Headers",
            value:
              "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
          },
        ],
      },
    ];
  },

  webpack(config, options) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: { and: [/\.(js|ts)x?$/] },
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

module.exports = nextConfig;

 

 

참고 : https://velog.io/@su_jin1127/kakao-map-vercel%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EC%98%80%EC%9D%84%EB%95%8C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-CORS-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B2%95

[kakao map] vercel로 배포하였을때 발생하는 CORS 오류 해결하는 법