如何从异地 API 获取数据，从服务器到客户端？

问：

我正在做一个项目，该项目将天气事件数据映射到地球上供用户查看。

在一个文件中，我有我的 fetch 函数抓取数据，并在服务器端运行。 我们将此文件称为 data.tsx

export async function Build_And_Fetch()
{
    var url = BuildUrl();
    console.log("DEBUG FETCH");
    const response = await fetch(url);
    
    return response.json();
}

现在，我们有了 mapbox 文件，我们将它命名为 mapbox.tsx 它运行客户端，因此在尝试导入 data.tsx 时会引发 CORS 错误。

"use client"
import * as React from "react";
import mapboxgl, { Map } from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";



const MapboxMap = ({jsondata: Object={}}) =>
{
    const [map, setMap] = React.useState<mapboxgl.Map>();

    const mapNode = React.useRef(null);
    mapboxgl.accessToken = "pk.eyJ1IjoiY2djdHNjaWVuY2VjZW50ZXIiLCJhIjoiY2xpM2dld3AzMGJkbTNlcGZ2aHowajZncCJ9.vFc7nroP3Pa0Cg7KAxvZjw"
    React.useEffect(()=>{
        const node = mapNode.current;

        if(typeof window === "undefined" || node === null) return;

        const mapboxMap = new mapboxgl.Map({
            container: node,
            style: "mapbox://styles/mapbox/light-v11",
            center: [-72,41],
            zoom:0.6
        });
        setMap(mapboxMap);
        
        
        mapboxMap.on('load',()=>{



            mapboxMap.addSource("test-data",{
            "type":"geojson",
            "data":{
                "type":"Feature",
                "geometry":{
                    "type":"Point",
                    "coordinates":[-71,42]
                },
                "properties" : {}
            }
        })}
        );

        // END
        return ()=>{mapboxMap.remove()};
    },[]);
    

    


    return <div ref={mapNode} style={{width:"100%",height:"100%"}}/>;
}
export default MapboxMap

有没有办法允许mapbox.tsx调用一个从data.tsx中获取承诺的函数？有没有其他方法可以处理将信息从服务器传递到客户端的问题？