原文链接 https://www.cnblogs.com/ajanuw/p/10324269.html

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 拦截页面请求的更多相关文章

  1. 使用一个HttpModule拦截Http请求,来检测页面刷新(F5或正常的请求)

    在Web Application中,有个问题就是:“我怎么来判断一个http请求到底是通过按F5刷新的请求还是正常的提交请求?” 相信了解ASP.NET的人知道我在说什么,会有同感,而且这其实不是一个 ...

  2. axios(封装使用、拦截特定请求、判断所有请求加载完毕)

    博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...

  3. 利用Fiddler拦截接口请求并篡改数据

    近期在测试一个下单的项目,出于安全角度考虑,测试了一个场景,那就是利用工具对接口进行拦截并篡改数据.将接口一拦截并篡改数据后,发现收货满满.开发默默接受了我的建议,并对代码进行了修改. 对于fiddl ...

  4. SNF快速开发平台MVC-EasyUI3.9之-Session过期处理和页面请求筛选

    Session引发的异常 其中一个bug是这样的: 使用Firefox登录进入系统后,再打开一个Tab,进入系统页面,点击logout. 在回到前一个tab页面,点击Save按钮,出现了js错误.这个 ...

  5. Fiddler拦截http请求修改数据

    1.拦截http请求 使用Fiddler进行HTTP断点调试是fiddler一强大和实用的工具之一.通过设置断点,Fiddler可以做到: ①修改HTTP请求头信息.例如修改请求头的UA,Cookie ...

  6. axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示)

    Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...

  7. Java 过滤器Filter,Java Filter 不拦截某些请求 Java 过滤器支持Ajax请求

    ================================ ©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一.Java ...

  8. python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求

    一.JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...

  9. iOS 开发中使用 NSURLProtocol 拦截 HTTP 请求

    这篇文章会提供一种在 Cocoa 层拦截所有 HTTP 请求的方法,其实标题已经说明了拦截 HTTP 请求需要的了解的就是 NSURLProtocol. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...

随机推荐

  1. JProfiler性能分析工具

    1.简介 JProfiler是一个商业授权的Java剖析工具,用于分析Java EE和Java SE应用程序. 2.JVMTI JDK本身定义了目标明确并功能完善的JNI(Java Native In ...

  2. 6核 CPU导致SQL2005安装时出“无法启动服务”错

    周一新买的IBM3650M3的服务器上安装SQL server2005 安装到一半时,报"提示:SQL Server 服务无法启动."错. 换了几个操作系统版本和换了几个版本的sq ...

  3. JGUI源码:Accordion折叠到侧边栏实现(6)

    折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = ...

  4. [再寄小读者之数学篇](2014-06-22 求极限 [中国科学技术大学2011年高等数学B考研试题])

    设数列 $\sed{x_n}$ 满足 $0<x_1<\pi$, $x_{n+1}=\sin x_n\ (n=1,2,\cdots)$. (1) 证明 $\dps{\vlm{n}x_n}$ ...

  5. webapp中绝对定位/固定定位与虚拟键盘冲突的问题

    $('body,html').height(document.body.clientHeight); 进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱. 测试有效. 当 ...

  6. DUMP102 企业级电商FE

    101 完成 webpack 配置后,有一套类似 live-reload 自动刷新提供 REPL 环境. [配置 webpack.config.js 别名,方便 js 文件做require 支持路径别 ...

  7. MySQL学习6 - 完整性约束

    一 介绍 二 not null 与default 三 unique 四 primary key 五 auto_increment 六 foreign key 快速理解foreign key 创建两张表 ...

  8. C#基于任务的异步模式

    using System; using System.Threading; using System.Threading.Tasks; using static System.Console; //异 ...

  9. IDEA 在同一目录创建多个项目

    以往的Eclipse.NetBeans等开发工具不同,IDEA的Project相当与Eclipse的Workspace,而Module相当于Project. 下边就给出Eclipse与IDEA的概念的 ...

  10. 深入理解JavaScript,这一篇就够了

    前言 JavaScript 是我接触到的第二门编程语言,第一门是 C 语言.然后才是 C++.Java 还有其它一些什么.所以我对 JavaScript 是非常有感情的,毕竟使用它有十多年了.早就想写 ...