如何使用 Google Chrome Puppeteer 库发出 POST 请求？

Question

大家好，我正在尝试使用 puppeteer headless chrome 库发出 POST 请求。我似乎无法让下面的代码工作。

    // Get csrf token
    let token = await page.evaluate(() => document.querySelector('[name="CSRFToken"]').value);

    let postResponse = await page.evaluate(async(token, cookies) => {    

    let response = fetch("/loyalty/points", {
          method : 'POST',
          cookie : cookies,
          postData : 'CSRFToken=' + token,      
        }).then(response => response.text()).catch(error => console.log(error));

        return response;

      });

      console.log('Final response');
      console.log(postResponse);

我不断收到错误消息，指出尚未设置 CSRF 令牌或 cookie 无效。

我的问题是，我在 puppeteer 中使用正确的方法来做 POST 吗？如果是这样，我有什么办法可以进行一些调试，以便我可以看到发送的实际 POST 请求？

感谢任何建议或帮助。谢谢

Answer 1

您没有创建请求 body：因此出现错误。您在请求 object 上设置的 postData 属性不是任何已知属性，因此它也不会在请求上设置，这意味着服务器永远不会看到您的 CSRF 令牌。您应该查看 MDN docs on fetch()。

我相信您只需将 postData 替换为 body 就可以了，但是如果不访问您的端点就很难知道。据我们所知，它可能需要特殊的 headers.

鉴于您只有 post 普通格式数据（由您的 key=value 代码暗示），我也将开始使用 FormData object 提供的您的浏览器以避免手动编码实现细节。

const formData = new FormData();

formData.append("CSRFToken", token);

const response = fetch("/loyalty/points", {
      method : 'POST',
      cookie : cookies,
      body   : formData,
      headers : {
        'cookie' : cookies,
        /* other headers you need, possibly content-type (see below) */
      },   
    }).then(response => response.text()).catch(error => console.log(error));

    return response;
  });

警告：使用 FormData API will always set the content-type of the data to multipart/form-data. If your server for some reason doesn't support that encoding, and you need to use application/x-www-form-urlencoded (see here for difference)，你不能盲目改变Content-Type：你还需要url encode the content。

为了调试，我会简单地使用一个普通的 Chrome 实例来查看它。您应该能够运行那里的代码并在 DevTools 中查看网络请求（您会立即注意到您 POST 一个空请求）。

如何使用 Google Chrome Puppeteer 库发出 POST 请求？

How do I do a POST request using the Google Chrome Puppeteer library?

javascript

google-chrome

node.js

puppeteer