javascript - איך לשנות כותרות בקשה באמצעות Puppeteer ו-Protocole של Chrome DevTools? (אולי בעיה בסינטקס של JS)

יש לי את הפונקציה הבאה ב-TypeScript שמניחה שדפדפן Chrome כבר הופעל באמצעות Puppeteer. את התיעוד עבור פונקציות Fetch שבהן משתמשים למטה ניתן למצוא כאן.

async function modify(client: CDPSession) {
    client.on('Fetch.requestPaused', async ({ requestId, request, frameId, resourceType, responseErrorReason, responseStatusCode, responseHeaders, networkId }) => {
        // Correctly prints out the User-Agent header's value
        console.log(request.headers["User-Agent"]);

        // After this line is run, I can inspect the request.headers object and see that User-Agent was successfully edited
        request.headers['User-Agent'] = 'trying to edit this header';

        // Continuing the request gives an error
        await client.send('Fetch.continueRequest', {
            requestId: requestId,
            headers: request.headers,
        });
    });
}

הנה השגיאה הספציפית שאני רואה:

שגיאה: שגיאת פרוטוקול (Fetch.continueRequest): פרמטרים לא תקינים headers: צפוי מערך

איך אני יכול לפתור את השגיאה הזו ולשנות בהצלחה את request.headers? האם זו בעיית תחביר טיפשית של Javascript/Typescript שאני פשוט לא מצליח להבין?

תשובה #1

Fetch.requestPaused מחזיר את הכותרות כאובייקט. לדוגמה:

{
    "Upgrade-Insecure-Requests":"1",
    "Accept": "text/html,application/xhtml+xml"}
}

Fetch.continueRequest מצפה ל-Array<{name: string, value: string}>. לדוגמה

[
    {"name": "Accept", value: "text/html,application/xhtml+xml"}
]

אתה יכול להשתמש בקוד ש-Puppeteer משתמש בו:

function headersArray(headers) {
  const result = [];
  for (const name in headers) {
    if (!Object.is(headers[name], undefined))
      result.push({name, value: headers[name] + ''});
  }
  return result;
}