I am deploying my code with Next.js to Vercel, and when I make requests with the Vercel domain, the API works, but when I redirect to another domain, I get a CORS error;



Apollo Client code :

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import fetch from 'cross-fetch';

const createApolloClient = () => new ApolloClient({
  link: new HttpLink({
    uri: process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT,
    fetch,
  }),
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-first',
    },
  },
});

const client = createApolloClient();
export default client;

Portfolio service code ;

import client from '../client/apolloClient';
import type { PortfolioBalancesQuery, NftBalanceQuery } from '../types/types-hooks';
import { PortfolioBalancesDocument, NftBalanceDocument } from '../types/types-hooks';

const SUPPORTED_CHAINS = ['ETHEREUM', 'ARBITRUM', 'OPTIMISM', 'POLYGON', 'BASE', 'BNB', 'CELO', 'ZKSYNC'];

type FetchOptions = {
    includeTokens?: boolean;
    includeNfts?: boolean;
};

export async function fetchPortfolioData(
    ownerAddress: string,
    options: FetchOptions = { includeTokens: true, includeNfts: true },
    chains: string[] = SUPPORTED_CHAINS
): Promise<{ tokens?: PortfolioBalancesQuery; nfts?: NftBalanceQuery }> {
    const [tokenResponse, nftResponse] = await Promise.all([
        options.includeTokens
            ? client.query({
                query: PortfolioBalancesDocument,
                variables: { ownerAddress, chains },
            })
            : Promise.resolve({ data: { portfolios: [] } }),
        options.includeNfts
            ? client.query({
                query: NftBalanceDocument,
                variables: { ownerAddress, chains },
            })
            : Promise.resolve({ data: { nftBalances: [] } }),
    ]);

    return {
        tokens: options.includeTokens ? tokenResponse.data : undefined,
        nfts: options.includeNfts ? nftResponse.data : undefined,
    };
}

next config ;

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/api/:path*",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          {
            key: "Access-Control-Allow-Methods",
            value: "GET,DELETE,PATCH,POST,PUT,OPTIONS",
          },
          {
            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, Authorization, id, filters, Api-Key",
          },
        ],
      },
    ];
  },
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    nextRuntime = "nodejs";
    return config;
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
};

module.exports = nextConfig;