部署到 vercel 时，“fetch”在中间件页面不起作用答案

【问题标题】：`fetch` does not work from middleware page when deployed to vercel部署到 vercel 时，“fetch”在中间件页面不起作用
【发布时间】：2022-01-11 17:35:17
【问题描述】：

我在一个路由上有一个中间件页面，它首先对后端服务器进行检查。在该中间件中，我尝试使用 fetch API 调用 next.js api 页面，该页面又与后端通信。此流程在本地开发环境中按预期工作，但当部署到 vercel 时，此流程会失败。

vercel 中显示的捕获到的错误是：TypeError: Fetch API cannot load: /api/make-check-at-backend/]。

使用的 URL 是相对路径：fetch("/api/make-check-at-backend/", ...)。

那里有什么问题？我是否需要包含托管 next.js 应用程序的完全限定 URL 值，包括域、协议等？如果是这种情况，如何从 Vercel 检索服务器/主机名？我应该使用环境变量吗？

这是中间件中使用的fetch代码：

const retrievedValue = await fetch("/api/make-check-at-backend/", {
      method: "POST",
      headers: headers,
      body: JSON.stringify({ someKey: 'someValue' }),
    });

附：我也尝试过使用axios 直接对后端进行http 调用，但这因axios 适配器已知问题而失败。这个相同的后端调用在任何api/* 页面上都可以正常工作。这一切都是因为中间件功能仍处于测试阶段吗？

【问题讨论】：

标签： next.js vercel

【解决方案1】：

事实证明，Vercel 设置有许多system environment variables，可在其相应部署的站点中使用。根据我的经验，在那些部署的站点中，fetch API 需要有完整的 URL，包括协议、主机、路径名等。

经过反复试验，我发现在已部署站点中工作的代码是：

const retrievedValue = await fetch(`https://${process.env.VERCEL_URL}/api/make-check-at-backend/`, {
      method: "POST",
      headers: headers,
      body: JSON.stringify({ someKey: 'someValue' }),
    });

下面是 Vercel 的环境变量文档的屏幕截图，以防上面的链接随着时间的推移而损坏。

【讨论】：