如何从服务器到客户端从场外 API 获取数据？

Question

我正在开发一个项目，该项目获取天气事件数据并将其映射到地球仪上以供用户查看。

在一个文件中，我的 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中获取promise的函数？我是否应该使用另一种方法来处理将信息从服务器传递到客户端？

Answer 1

虽然我还没有找到适合我的脚本，但我确实找到了合适的答案。

API 路由将是解决方案。据我所知，我应该使用来自 Mapbox 地图的内部 API 请求来向我的数据 api 发送请求。然后，Data api 将获取我的 json 数据并将其传回给 Mapbox。

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

我对该框架还很陌生，但它似乎是避免尝试从客户端发出请求时发生 CORS 冲突的解决方案，并且是 Vercel 推荐的。