如何拦截浏览器发出的 HTTP OPTIONS 调用

Question

我有一个用例，我想拦截和记录 HTTP OPTIONS 调用。我知道这些是作为 CORS 的一部分由浏览器完成的

我尝试过对 XMLHttpRequest 进行monkeypatching，还尝试过通过“fetch”事件拦截的 service-worker。

但是我只能捕获非 OPTIONS 调用（GET、PUT、POST）

如何拦截 OPTIONS 调用？我清楚地看到它们是在网络标签中完成的

Answer 1

CORS 预检请求作为浏览器安全实现硬编码到浏览器中，不会通过可编程 API 向我们公开。从本质上讲，拦截或更改预检请求可能会否定 CORS 本身的安全性。

因为 OPTIONS 请求在 Chrome 开发工具网络选项卡中可用，您可以使用 Puppeteer，它使用 Chrome 开发工具协议来访问较低级别的网络请求。 page.setRequestInterception() 将捕获 OPTIONS 请求。

ma​​in.mjs

import puppeteer from 'puppeteer';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  page.on('request', debugRequest);

  await page.setRequestInterception(true);

  await page.evaluate(() => {
    // custom request headers should force preflight CORS requests
    // (see https://www.w3.org/TR/cors/#resource-preflight-requests)
    fetch('https://example.com', {
      headers: {
        'force-preflight-request': null
      }
    });
  })

  await browser.close();
})()

function debugRequest(request) {
  console.log(request.method(), request.url())
}