如何用Puppeteer获取网站JSON响应？谷歌翻译接口问题求助

我之前也碰到过类似的情况——调用谷歌翻译的这个API接口时，浏览器会自动触发JSON文件下载，用Puppeteer写自动化代码的时候，明明想把响应内容打印到控制台，结果文件还是自动存到磁盘里了。

先看看你原来的代码：

const puppeteer = require('puppeteer');
(async () => { 
const browser = await puppeteer.launch({headless:false, args: ["--no-sandbox"]}); 
const page = await browser.newPage(); 
// Approach 1: 
const response = await page.goto('https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=zh&dt=t&q=Edit%20Report'); 
let text = await response.text(); 
console.log(text); 
let json = await response.json(); 
console.log(json); 
await browser.close(); 
})();

问题出在这个API的响应头里，它设置了Content-Disposition: attachment，浏览器看到这个头就会自动触发下载，Puppeteer默认会跟着浏览器的行为走，所以你的代码拿不到响应内容，反而文件被存到磁盘了。

要解决这个问题，我们可以用Puppeteer的请求/响应拦截机制，在浏览器处理下载之前直接捕获响应内容。这里有两种可行的方案：

方案一：用Puppeteer监听响应事件 #

通过启用请求拦截，然后监听所有响应，筛选出我们目标的翻译API请求，直接提取内容：

const puppeteer = require('puppeteer');

(async () => { 
  const browser = await puppeteer.launch({headless:false, args: ["--no-sandbox"]}); 
  const page = await browser.newPage(); 

  // 开启请求拦截
  await page.setRequestInterception(true);

  // 允许所有请求正常发送
  page.on('request', (request) => {
    request.continue();
  });

  // 监听所有响应，捕获目标API的内容
  page.on('response', async (response) => {
    const targetUrl = 'translate.googleapis.com/translate_a/single';
    if (response.url().includes(targetUrl)) {
      try {
        const responseText = await response.text();
        console.log('原始响应内容:', responseText);
        
        const parsedJson = JSON.parse(responseText);
        console.log('解析后的JSON:', parsedJson);
      } catch (err) {
        console.error('处理响应出错:', err);
      }
    }
  });

  // 访问目标API地址
  await page.goto('https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=zh&dt=t&q=Edit%20Report'); 

  await browser.close(); 
})();

方案二：直接用Node.js的fetch请求（更高效） #

其实这个谷歌翻译的公开API不需要浏览器环境，直接用Node.js内置的fetch（或者axios）请求就行，完全绕开Puppeteer的下载问题：

async function fetchTranslation() {
  const apiUrl = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=zh&dt=t&q=Edit%20Report';
  const response = await fetch(apiUrl);
  const responseText = await response.text();
  
  console.log('原始响应:', responseText);
  const translationResult = JSON.parse(responseText);
  console.log('翻译结果JSON:', translationResult);
}

fetchTranslation();

这两种方案都能让你拿到响应内容而不是自动下载文件，如果你一定要用Puppeteer的话，方案一就可以解决问题；如果只是要调用翻译API，方案二更轻便高效。

内容的提问来源于stack exchange，提问作者Max Li