javascript - 如何使用 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 token 或 cookie 无效。

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

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

Answer 1

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

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

鉴于您仅发布普通表单数据(由您的 key=value 代码暗示)，我还将开始使用您的浏览器提供的 FormData 对象来避免手动编码实现细节。

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始终将数据的 content-type 设置为 multipart/form-data。如果您的服务器由于某种原因不支持该编码，并且您需要使用 application/x-www-form-urlencoded ( see here for difference )，您不能盲目地更改 Content-Type:您还需要url encode the content 。

为了进行调试，我只需使用普通的 Chrome 实例即可看到这一点。您应该能够在那里运行代码并在 DevTools 中查看网络请求(您会立即注意到您发布了一个空请求)。