Next.js fetch请求Webhook时报Only absolute URLs are supported错误如何解决

AI 小北

2026-10-17

这个错误的核心原因是传入fetch的URL不是有效的http:///https://开头的绝对地址，绝大多数情况是你取到的process.env.WEBHOOK_URL为undefined，或是配置的地址为相对路径、缺少协议前缀。可按以下步骤排查解决：

第一步：先校验环境变量是否正确读取
可以在获取URL之后加一行打印确认取值：
```
const url = process.env.WEBHOOK_URL;
console.log('WEBHOOK_URL取值：', url);
```
如果输出为undefined，说明环境变量没有被正确加载，需要对应运行环境调整配置：
- Node.js环境：需先安装dotenv依赖，在代码入口最顶部引入dotenv并加载配置，确认.env文件放在项目根目录，文件内的WEBHOOK_URL填写完整的绝对路径。
- 前端项目环境：前端框架默认会过滤非指定前缀的环境变量：Vite项目需要将变量名改为VITE_WEBHOOK_URL，代码中通过import.meta.env.VITE_WEBHOOK_URL取值；Create React App项目需要将变量名改为REACT_APP_WEBHOOK_URL。
第二步：确认地址格式正确
如果能正常打印出变量值，检查地址是否带http:///https://前缀，不能只写域名或路径，比如不能配置为example.com/webhook，必须写为https://example.com/webhook这类完整的绝对地址。

第三步：添加防御性判断，避免非法URL传入fetch
可以在发起请求前先校验URL合法性，提前抛出明确的错误提示，方便排查，修改后的参考代码如下：

const url = process.env.WEBHOOK_URL;
// 提前校验地址合法性
if (!url || !url.startsWith('http')) {
  throw new Error('WEBHOOK_URL 环境变量配置错误，请确认已配置带http/https前缀的完整地址');
}
const response = await fetch(
  url, // 无需多余的模板字符串包裹，直接传变量即可
  {
    body: JSON.stringify({
      name,
      email,
      message,
    }),
    headers: {
      'Content-Type': 'application/json'
    },
    method: 'POST'
  }
);