请求远程数据

目标：用 LFHttp 拉取第三方接口数据并渲染。做一个实时汇率面板。

main.js

// ==UserScript==
// @name USD Rate Panel
// @description 在页面上展示实时美元汇率
// @match https://example.com/*
// @require dom
// @require http
// ==/UserScript==

LFDOM.ready(async () => {
  const panel = LFDOM.createFloatingRoot({ id: "usd-rates" });
  panel.innerHTML = "<div style='padding:10px 14px'>Loading...</div>";
  try {
    const data = await LFHttp.json("https://open.er-api.com/v6/latest/USD");
    panel.firstElementChild.textContent = `1 USD = ${data.rates.CNY} CNY`;
  } catch (error) {
    panel.firstElementChild.textContent = `加载失败: ${error.message}`;
  }
});

为什么不直接用 fetch？

页面里的 fetch 受目标站点 CSP 和 CORS 限制，很多跨域请求发不出去。LFHttp 的请求经过扩展后台代理，绕开这些限制，同时有安全边界：

拒绝本机 PluginX 客户端端口（任何回环写法的 41720，请改用 LFHttp.client）、chrome-extension://、file:// 和非 http(s) 目标（重定向后的地址同样会复核）
默认携带目标域名已有的浏览器 cookie（可传 credentials: 'omit' 关闭）；Cookie / Referer / User-Agent 等浏览器保留头可以通过 headers 显式指定，会在网络层写入（传 Cookie 会整体替换浏览器自带的 cookie）
对象 body 会被 JSON.stringify，但不会自动设置 Content-Type，发 JSON 时记得加 headers: { "content-type": "application/json" }
支持 stream() 流式响应和 websocket() 长连接
要超时或中途取消，传 signal（如 signal: AbortSignal.timeout(10000)）：请求会真正取消，并以 code: 'ABORTED' 的 AbortError 拒绝（标签页隐藏时浏览器会节流 AbortSignal.timeout，可能晚数秒才触发）

注意

请求失败会抛异常：非 2xx 抛 HTTPError，DNS 失败/连接被拒等网络故障抛 NetworkError，地址被安全策略拒绝抛 LFHttpUrlBlocked。记得用 try/catch 处理，别让整个应用崩掉。

请求远程数据 ​

为什么不直接用 fetch？ ​

请求远程数据

为什么不直接用 fetch？