如何用纯JavaScript实现Webhook监听与API调用（无需Zapier）

一、发起API调用（纯前端可直接实现） #

纯前端JavaScript可以直接用fetch API或者XMLHttpRequest发起API请求，示例代码如下：

// 用fetch发起POST请求示例
fetch('https://目标API地址', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer 你的凭证' // 凭证安全问题见下文说明
  },
  body: JSON.stringify({
    // 要发送的业务数据
    key: 'value'
  })
})
.then(response => response.json())
.then(data => {
  // 处理返回数据（你已掌握解析部分）
  console.log(data);
})
.catch(error => {
  console.error('请求出错:', error);
});

二、监听Webhook的局限与替代方案 #

注意：纯前端浏览器环境无法直接作为Webhook的接收端点——因为前端代码运行在用户浏览器中，没有固定的公网可访问地址，第三方服务无法主动向你的浏览器发送Webhook请求。你可以根据业务场景选择以下替代方案：

1. 轮询方案 #

如果目标服务不支持主动推送，可以定期发起请求拉取最新数据，模拟“监听”效果：

// 每30秒轮询一次（可根据业务调整间隔）
setInterval(() => {
  fetch('https://目标服务的查询接口')
  .then(response => response.json())
  .then(data => {
    // 检查数据是否更新，执行对应业务逻辑
    if (data.hasUpdated) {
      console.log('数据更新:', data);
    }
  })
  .catch(error => console.error('轮询出错:', error));
}, 30000);

2. Server-Sent Events (SSE) #

如果目标服务支持SSE（服务器推送事件），可以在前端建立持久连接，接收服务端主动推送的更新，比轮询更高效：

const eventSource = new EventSource('https://目标服务的SSE端点');

eventSource.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 处理推送数据（对应原Webhook的触发逻辑）
  console.log('收到推送:', data);
};

eventSource.onerror = function(error) {
  console.error('SSE连接出错:', error);
  eventSource.close();
};

3. WebSocket连接 #

如果目标服务支持WebSocket，可建立双向实时连接，接收服务端的事件通知，适合高频实时交互场景：

const socket = new WebSocket('wss://目标服务的WebSocket端点');

socket.onopen = function() {
  console.log('WebSocket连接已建立');
};

socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  // 处理实时消息
  console.log('收到WebSocket消息:', data);
};

socket.onerror = function(error) {
  console.error('WebSocket出错:', error);
};

socket.onclose = function() {
  console.log('WebSocket连接已关闭');
};

三、凭证的安全存储方案 #

前端存储敏感凭证存在天然风险，务必遵循以下原则：

• 禁止用localStorage存储凭证：localStorage为明文存储，极易被XSS攻击窃取。
• 优先使用HttpOnly + Secure Cookie：若有后端配合，让后端设置带HttpOnly、Secure属性的Cookie，前端JS无法读取该Cookie，浏览器会自动在请求时携带，能有效防范XSS攻击。
• 短时效令牌+内存存储：若使用OAuth2等授权方式，获取短时效的access_token后仅存在内存（如全局变量）中，页面刷新后重新获取，避免持久化存储带来的泄露风险。
• 绝对不要硬编码凭证：无论代码是否压缩混淆，都不能将敏感凭证直接写在前端代码里。

内容的提问来源于stack exchange，提问作者seon