Next.js子服务端组件获取数据遇CORS错误求助

你遇到的CORS错误是因为fetchRadio函数意外在浏览器端执行了——服务端组件的代码本应在服务器端运行，不受浏览器CORS政策限制。核心问题是你的Radio服务端组件的异步数据获取逻辑跑到了客户端执行。

方案1：确保Radio组件严格作为服务端组件运行 #

1. 确认Radio组件文件中没有"use client"指令，且未导入任何客户端专属API（如useState、useEffect等）。
2. 检查Radio依赖的子组件（如@/components/ui/radio/radio）是否带有"use client"：即便子组件是客户端组件，Radio作为父组件仍可保持服务端身份，其异步数据逻辑依然会在服务器端执行。

调整后的fetchRadio函数无需处理CORS（服务端请求不受浏览器CORS限制）：

export async function fetchRadio(pathName: string){
    try {
        const response = await fetch("https://api.example.com");
        if (!response.ok) {
            throw new Error(`API请求失败: ${response.status}`);
        }
        const data = await response.json();
        console.log(pathName); // 此日志会输出在终端，而非浏览器控制台
        return data;
    } catch (error) {
        console.error("获取数据失败:", error);
        throw new Error("Failed to fetch data.");
    }
}

方案2：通过API Route转发请求（备用方案） #

如果无法确保Radio组件在服务端执行，可创建Next.js API Route作为代理绕过CORS：

1. 在app/api/radio/route.ts中创建代理接口：

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
    const { searchParams } = new URL(request.url);
    const pathName = searchParams.get('pathName');
    
    try {
        const response = await fetch(`https://api.example.com?path=${pathName}`);
        const data = await response.json();
        return NextResponse.json(data);
    } catch (error) {
        return NextResponse.json({ error: 'Failed to fetch data.' }, { status: 500 });
    }
}

2. 在客户端组件中调用本地API Route：

const fetchRadio = async (pathName: string) => {
    const response = await fetch(`/api/radio?pathName=${encodeURIComponent(pathName)}`);
    if (!response.ok) throw new Error('Failed to fetch data.');
    return response.json();
};

• 服务端组件的异步数据逻辑仅在服务器端执行，日志会输出到终端而非浏览器控制台。
• 客户端组件调用外部API时，通过Next.js API Route转发是绕过CORS最可靠的方式。

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