browser-use例子中如何处理跨域请求？

Question

在使用 `browser-use` 模拟浏览器行为进行自动化操作时，常遇到跨域请求被浏览器安全策略（CORS）拦截的问题。例如，当脚本尝试从 `https://site-a.com` 向 `https://api.site-b.com` 发起 XMLHttpRequest 或 Fetch 请求时，若目标服务未正确配置 `Access-Control-Allow-Origin` 等响应头，请求将被同源策略阻止。该问题在真实浏览器环境中尤为明显，即使页面已正常加载，动态API调用仍可能失败。如何在 `browser-use` 场景下通过代理转发、CORS绕过策略或调试模式临时禁用安全策略来有效处理跨域请求，成为开发者必须解决的关键技术难题。

Answer 1

一、跨域请求拦截问题的背景与成因分析

在使用 browser-use 模拟真实浏览器行为进行自动化测试或爬虫操作时，开发者常面临跨域资源共享（CORS）策略的限制。CORS 是现代浏览器实现同源策略（Same-Origin Policy）的核心机制之一，旨在防止恶意脚本从一个源读取另一个源的敏感数据。

当页面运行于 https://site-a.com 时，若其 JavaScript 脚本尝试通过 fetch 或 XMLHttpRequest 请求 https://api.site-b.com/data，浏览器会在预检请求（preflight request）阶段检查目标服务器是否返回了合法的 Access-Control-Allow-Origin 响应头。若未配置或配置不匹配，请求将被直接拦截，控制台报错如：

        Access to fetch at 'https://api.site-b.com/data' from origin 'https://site-a.com' 
        has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    

值得注意的是，该限制仅作用于浏览器内的脚本层面——页面加载本身不受影响（如 img、script 标签可跨域），但 AJAX/Fetch 等主动数据请求则受严格管控。

二、常见解决方案分类与技术路径

针对 browser-use 场景下的 CORS 问题，可从以下三个维度构建解决策略：

1. 代理转发：绕过浏览器直接请求
2. CORS 绕过策略：修改请求/响应流
3. 调试模式禁用安全策略：开发环境临时方案

三、方案一：反向代理中转请求（推荐生产级做法）

最合规且稳定的方式是通过反向代理将跨域请求转换为同源请求。例如，在本地启动一个 Node.js 中间层服务，所有前端请求发往 /proxy/api/site-b，由后端代理至真实地址并携带必要认证信息。

方法	实现方式	适用场景	安全性
Express + http-proxy-middleware	Node.js 启动本地代理服务	自动化测试调试期	高（可控出口）
Nginx 反向代理	部署级配置 upstream 转发	长期集成环境	极高
Puppeteer 自定义路由	监听页面请求并劫持重定向	headless 浏览器自动化	中等

四、方案二：利用浏览器 DevTools Protocol 绕过 CORS

在基于 Chromium 的自动化框架（如 Puppeteer、Playwright）中，可通过 CDP（Chrome DevTools Protocol）指令临时关闭 CORS 验证。此方法适用于测试环境，严禁用于生产。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--disable-web-security',
      '--user-data-dir=/tmp/chrome-dev-profile'
    ],
    headless: false
  });

  const page = await browser.newPage();
  await page.goto('https://site-a.com');
  
  // 启用网络拦截以修改响应头（进阶技巧）
  await page.setRequestInterception(true);
  page.on('request', req => {
    if (req.url().includes('api.site-b.com')) {
      req.continue();
    } else {
      req.continue();
    }
  });
})();
    

五、方案三：服务端注入响应头（MITM 中间人模式）

对于无法修改目标 API 的情况，可采用中间人代理（Man-in-the-Middle Proxy），如 mitmproxy 或 browser-sync，动态注入 CORS 头部。

示例：使用 mitmweb 修改响应头

def response(flow):
    flow.response.headers["Access-Control-Allow-Origin"] = "*"
    flow.response.headers["Access-Control-Allow-Methods"] = "GET, POST, OPTIONS"
    flow.response.headers["Access-Control-Allow-Headers"] = "Content-Type, Authorization"
    

六、自动化流程中的综合处理策略设计

结合多种技术手段，构建鲁棒性强的自动化执行链路。以下为典型架构流程图：

graph TD
    A[Browser-Use 启动] --> B{是否处于调试模式?}
    B -- 是 --> C[启动无头浏览器
参数: --disable-web-security]
    B -- 否 --> D[启用本地反向代理服务]
    D --> E[拦截所有XHR/Fetch请求]
    E --> F{目标URL跨域?}
    F -- 是 --> G[转发至代理网关]
    G --> H[远程服务响应]
    H --> I[代理层添加CORS头]
    I --> J[回传给浏览器上下文]
    F -- 否 --> K[正常放行]
    

七、高级技巧：Puppeteer Request Interception 实现透明代理

通过 Puppeteer 提供的 page.setRequestInterception(true) 接口，可在不改变原始页面逻辑的前提下，对网络请求进行拦截与重写。

• 支持对特定域名请求进行 mock 返回
• 可注入自定义 Cookie 或 Token
• 实现请求日志追踪与性能监控

代码片段如下：

await page.setRequestInterception(true);
page.on('request', async (req) => {
  if (req.url().includes('api.site-b.com')) {
    const response = await fetch(req.url(), {
      method: req.method(),
      headers: req.headers(),
      body: req.postData()
    });
    const buffer = Buffer.from(await response.text(), 'utf8');
    req.respond({
      status: response.status,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Content-Type': response.headers.get('content-type')
      },
      body: buffer
    });
  } else {
    req.continue();
  }
});