CORS preflight error only affecting Safari and Firefox

Question

I'm new to Next.js and server side rendering. I'm using the Pexels API. Everything works as expected on Chrome, but on Firefox and Safari I'm encountering the following error.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.pexels.com/v1//curated?per_page=10. (Reason: header ‘user-agent’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response).

I've looked at the Next.js documentation as well as this Stackoverflow posts, but it's not clear to me how I'm suppose to create a rewrite so that I get around this error or run the middleware so I don't encounter this error?

Below is my next.config.js and api call. The domain that I want to whitelist is api.pexels.com Any help on how to implement this would be greatly appreciated.

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  images: {
    domains: ["images.pexels.com", "www.pexels.com"],
  },
  transpilePackages: ['chic-ui'],
  compiler: {
    // Enables the styled-components SWC transform
    styledComponents: true
  },
}

module.exports = nextConfig


// API call in pages/api
const key = process.env.NEXT_PUBLIC_API_KEY;

const getCuratedPhotos = async (page?: number) => {
  console.log('pages', page)
  const client = createClient(key);
  try {
    if (!page) {
      return await client.photos.curated({ per_page: 10 });
    } else {
      return await client.photos.curated({ per_page: 10, page });
    }
  } catch (e) {
    console.log('error', e);
  }
}