【vercel】部署后的代理怎么做？

我的React项目，采用create-react-app脚手架开发。

【组件】 想发起请求：

useEffect(() => {
    // 中国奖牌
    fetch(
      '/api/List/getHandDataList?id=TDAT1719213513235359&serviceId=tvcctv&n=100&p=1'
    )
      .then((response) => response.json())
      .then((json) => {
        const { itemList } = json?.data;
        const goldList = itemList
          .filter((item) => item.mark === 'jin')
          .map(({ brief, image, operate_time, title, url }) => ({
            id: url,
            // 项目
            category: brief,
            // 运动员图片
            img: image,
            // 运动员姓名
            sporterName: title,
            // 时间
            time: operate_time,
            // 回放链接
            url: url,
          }));
        setGoldSportList(goldList);
      })
      .catch((error) => {
        console.error('请求失败', error);
      });
  }, []);

我本地设置代理的手段是：package.json加上“proxy”字段：

{
    "proxy": "https://api.cntv.cn"
}

参考：create-react-app.dev/docs/proxyi…

vercel部署上去后，代理不生效。

查阅文档得知，vercel部署到生产，需要代理的话，项目根目录下添加vercel.json,并使用以下配置：

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://api.cntv.cn/:path*"
    }
  ]
}

其中 :path*是为了捕获/api后面的所有路径部分，并将其传递到目标 URL，类似于动态路由，path只是一个命名，可以起其他名字。

参考：vercel.com/docs/projec…

线上体验地址： react-playground-xi.vercel.app/page