如何使用 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

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

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

鉴于您只发布普通表单数据（您的 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 中查看网络请求（您会立即注意到您发布一个空请求）。