码迷,mamicode.com
首页 > 其他好文 > 详细

puppeteer 拦截页面请求

时间:2019-01-26 17:55:08      阅读:1798      评论:0      收藏:0      [点我收藏+]

标签:app   browser   header   字符串   intercept   script   ios   amp   set   

Request

Response

page.setRequestInterception(true) 开启拦截

req.respond() 返回一个自定义响应

req.continue() 继续请求

注意:

  • 监听的请求的类型有: document,stylesheet,image,media,font,script,texttrack,xhr,fetch,eventsource,websocket,manifest,other
  • 拦截请求需要开启 await page.setRequestInterception(true);
  • await req.respond()和await req.continue() 不能同时调用
  • 使用await req.respond() 拦截返回值注意跨域
  • 使用await req.respond() 拦截返回值注意返回json或字符串

main.js

const pptr = require('puppeteer');

async function bootstrap() {
  const browser = await pptr.launch({
    headless: false,
    slowMo: 250,
  });
  const page = await browser.newPage();
  page.on('console', m => {
    // console.log(m.text());
  });

  await page.setRequestInterception(true);
  page.on('request', async req => {
    if (req.resourceType() === 'xhr') {
      console.log(req.url());
      await req.respond({
        status: 200,
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        contentType: 'application/json; charset=utf-8',
        body: JSON.stringify({ code: 0, data: 'hello puppeteer' }),
      });
      // await req.continue();
    } else {
      await req.continue();
    }
  });

  page.on('response', async res => {
    if (res.url().indexOf('/header') >= 0) {
      console.log(res.status());

      // 原本接口返回的数据 {"code":0,"data":"hello ajanuw"}
      console.log(await res.text());
      // await browser.close();
    }
  });

  page.on('requestfinished', req => {
    console.log(`请求完成: ${req.url()}`);
  });

  page.on('requestfailed', req => {
    console.log(`请求失败: ${req.url()}`);
  });

  await page.goto('http://127.0.0.1:5500/index.html');
}

bootstrap();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="get()">click get</button>
      <p>{{ data | json }}</p>
    </div>
    <script src="https://unpkg.com/vue@2.5.22/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
    <script>
      const http = axios.create({
        baseURL: 'http://127.0.0.1:5000',
      });
      new Vue({
        el: '#app',
        data() {
          return {
            data: ''
          };
        },

        methods: {
          get() {
            http('/header').then(({ data }) => {
              console.log(typeof data.data);
              this.data = data
            });
          },
        },

        mounted() {},
      });
    </script>
  </body>
</html>

接口

@Get('/header')
@Header('Access-Control-Allow-Origin', '*')
test() {
    return {
      code: 0,
      data: 'hello ajanuw',
    };
}

puppeteer 拦截页面请求

标签:app   browser   header   字符串   intercept   script   ios   amp   set   

原文地址:https://www.cnblogs.com/ajanuw/p/10324269.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!