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

Question

我在路线上有一个中间件页面，它首先对后端服务器进行检查。在该中间件中，我尝试api使用 API 调用 next.js 页面fetch，该页面又与后端进行通信。此流程在本地开发环境中按预期工作，但部署到 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' }),
    });

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

Answer 1

事实证明，Vercel 设置有许多系统环境变量，可在相应的部署站点中使用。根据我的经验，在那些已部署的站点中，fetchAPI 需要具有完整的 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 环境变量文档的屏幕截图，以防上面的链接随着时间的推移而损坏。