Javascript – CORS policy defined in next.config.js doesn't seem to be applied to API call

I have a Next.js app with the following structure:

.
├── next.config.js
└── src /
    └── app/
        ├── page.tsx
        └── getYoutubeTranscript/
            └── getYoutubeTranscript.tsx

next.config.js has the following policy defined:

// @ts-check
 
/** @type {import('next').NextConfig} */
const nextConfig = {
    async headers() {
        return [
            {
                // matching all API routes
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" }, //http://localhost:3000
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,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" },
                ]
            }
        ]
    }
}

module.exports = nextConfig

page.tsx is a client component that uses the getYoutubeTranscript server component to fetch a Youtube transcript. But when this code executes I get the client-side error:

Access to fetch at 'https://www.youtube.com/watch?v=<ID>' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Looks like I misconfigured CORS in next.config.js — any tips here to further diagnose?

Update #1: I don’t see a Host listed in the Request Headers of my call from Developer Console? This answer implies when Host != Origin that causes the error

Update #2: Here are the Response Headers (two images):