Next.js中next.config.js配置的CORS策略未生效求助排查

我的Next.js项目结构如下：

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

next.config.js中的CORS配置如下：

// @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是客户端组件，它调用getYoutubeTranscript这个服务端组件获取YouTube字幕，但执行时出现客户端错误：

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.

我认为next.config.js里的CORS配置存在问题，求排查建议？

更新1：开发者控制台的请求中看不到Host请求头？有资料提到当Host与Origin不一致时会触发这类错误

更新2：以下是响应头信息：

核心问题：你的CORS配置完全没起作用 #

你在next.config.js里配置的CORS规则只针对/api/:path*路径，但当前报错是客户端直接请求youtube.com触发的跨域——YouTube服务器不会给你的本地站点返回允许跨域的响应头，这和你自己项目的CORS配置毫无关系。

正确解决思路 #

受浏览器同源策略限制，客户端不能直接跨域请求第三方服务（比如YouTube），你需要通过以下两种方式绕开：

1. 确保请求在服务端执行
   你已经有getYoutubeTranscript这个服务端组件，要把请求YouTube的逻辑放在服务端：

   • 在getYoutubeTranscript.tsx顶部添加'use server'指令（App Router下服务端组件的标识）
   • 将请求YouTube的代码完全放在这个服务端组件内，禁止在客户端组件里直接调用fetch请求YouTube

2. 创建API路由作为代理
   如果需要在客户端发起请求，先请求自己项目的API路由，再由API路由转发请求到YouTube：

   • 在src/app/api/youtube-transcript/route.ts创建代理路由：

     export async function GET(request: Request) {
       const { searchParams } = new URL(request.url);
       const videoId = searchParams.get('v');
       if (!videoId) return new Response('缺少视频ID', { status: 400 });
     
       // 转发请求到YouTube，模拟浏览器请求头避免被拦截
       const response = await fetch(`https://www.youtube.com/watch?v=${videoId}`, {
         headers: {
           'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
         }
       });
       const data = await response.text();
       return new Response(data, {
         headers: {
           'Content-Type': response.headers.get('Content-Type') || 'text/plain'
         }
       });
     }
     

   • 客户端组件中请求这个API路由：fetch('/api/youtube-transcript?v=<ID>')

关于Host头的问题 #

从截图看，你的请求确实没有Host头，但这不是核心问题——即使补上Host头，YouTube也不会允许你的本地站点跨域请求。Host头是HTTP协议的必要字段，可能是浏览器在特定场景下自动省略，但和当前的CORS错误无关。

内容的提问来源于stack exchange，提问作者Mysterious Otter