How can I configure different HTTP headers for different routes in Next.js on the client side?

How can I configure different HTTP headers for different routes in Next.js on the client side?

I encountered CORS and SharedBuffer errors in my Next.js application. While I managed to resolve the issues by setting up appropriate headers using the following code, the solution only works when I reload the page. When I navigate between routes on the client side, I still encounter errors.

Specifically:

• The CORS issue was resolved for the /convert-voice/:path* route.
• The SharedBuffer error persists for the /my-ai-voices route. Both routes are client-side routes.

I implemented custom HTTP headers for different routes on the client side in my Next.js application. When I reload the page, both routes (/convert-voice/:path* and /my-ai-voices) function as expected, and the CORS and SharedBuffer errors are resolved as intended. However, when I navigate between routes without reloading the page, I encounter the CORS error for the /convert-voice/:path* route and the SharedBuffer error for the /my-ai-voices route. I expected that the configured headers would persist across route changes and prevent these errors from occurring during navigation.

`

import './src/env.mjs';
/** @type {import('next').NextConfig} */

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'zingzang.s3.eu-west-2.amazonaws.com',
        pathname: '/musicGenerated/**',
      },
      {
        protocol: 'https',
        hostname: 'randomuser.me',
        pathname: '/api/portraits/**',
      },
      {
        protocol: 'https',
        hostname: 'cloudflare-ipfs.com',
        pathname: '/ipfs/**',
      },
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com',
        pathname: '/u/**',
      },
      {
        protocol: 'https',
        hostname: 'picsum.photos',
      },
      {
        protocol: 'https',
        hostname: 'flagcdn.com',
      },
      {
        protocol: 'https',
        hostname: 'utfs.io',
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        pathname: '/redqteam.com/isomorphic-furyroad/public/**',
      },
      {
        protocol: 'https',
        hostname: 'isomorphic-furyroad.s3.amazonaws.com',
      },
      {
        protocol: 'https',
        hostname: 'd2sfqo51tiwost.cloudfront.net',
      },
    ],
  },
  reactStrictMode: false,
  swcMinify: true,
  async headers() {
    return [
      {
        source: '/my-ai-voices',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
        ],
      },
      {
        source: '/convert-voice/:path*',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'unsafe-none | require-corp | credentialless',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
        ],
      },
      {
        source: '/ffmpeg_core_dist/ffmpeg-core.js',
        headers: [
          {
            key: 'Cross-Origin-Embedder-Policy',
            value: 'require-corp',
          },
          {
            key: 'Cross-Origin-Opener-Policy',
            value: 'same-origin',
          },
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
        ],
      },
    ];
  },
};

export default nextConfig;