`fetch` 在部署到 Vercel 时无法从中间件页面运行

Question

我在路由上有一个中间件页面，它首先对后端服务器进行检查。在该中间件中，我尝试使用 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 检索 server/host 名称？我应该使用环境变量吗？

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

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

P.S。我也尝试过使用 axios 直接向后端发出 http 调用，但是由于 axios 适配器已知问题而失败。同样的后端调用在任何 api/* 页面上都按预期工作。这一切都是因为中间件功能仍处于测试阶段吗？

Answer 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 环境变量文档的屏幕截图，以防上面的 link 随着时间的推移而损坏。

`fetch` 在部署到 Vercel 时无法从中间件页面运行

`fetch` does not work from middleware page when deployed to vercel

next.js

vercel