Nextjs 从子组件获取数据

Question

我有 page.tsx 组件，我需要在其中获取当前路径名，因此它是一个 客户端组件。然后我有一个子服务器组件，我想根据作为 prop 传递的路径名来获取数据。但是，当我尝试获取数据时，我收到以下错误：

未捕获（承诺中）错误：无法获取数据。在 fetchRadio

可以从来源获取“https://api.example.com” “http://localhost:3000”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。如果不透明的响应满足您的需求，请设置请求的 模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。

父组件：

"use client";

import * as React from "react";
import Radio from "@/components/ui/radio/radio";
import { usePathname } from "next/navigation";

export default function Page() {
    const pathName = usePathname();

    return <Radio pathName={pathName} />;
}

子服务器组件：

import * as React from "react";
import { fetchRadio } from "@/lib/data";

export default async function Radio({ pathName }: { pathName: string }) {
    const radio = await fetchRadio(pathName);

    return (
        {/* ... */}
    );
}

获取功能：

export async function fetchRadio(pathName: string){
    try {
        const radios = await fetch("https://api.example.com");
        const data = await radios.json();

        console.log(pathName); // for now I just want to log the pathname
    } catch (error) {
        console.error("Error:", error);
        throw new Error("Failed to fetch data.");
    }
}

Answer 1

嗯，这并不是真正的 NextJS 问题，而是 CORS 问题 客户端请求被浏览器直接阻止，因为 https://api.example.com 不允许跨源请求。您的本地主机与 example.com 不是同一来源。