Contoh Konfigurasi Header untuk Allow CORS pada Next.Js

Persiapan

• Siapkan satu endpoint API
• Pastikan endpoint tersebut dapat diakses

Konfigurasi Header

• Buka file next.config.ts, isi konfigurasi header disana:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'ui-avatars.com',
      },
    ],
  },
  async headers() {
    return [
      {
        source: "/api/posts",
        headers: [
          {
            key: "Access-Control-Allow-Origin",
            value: "https://lukmanlab.com"
          },
        ]
      }
    ]
  }
};

export default nextConfig;

Sesuaikan value https://lukmanlab.com dengan domain yang anda izinkan. Anda bisa membaca dokumentasinya disini.