puppeteer 拦截页面请求
原文链接 https://www.cnblogs.com/ajanuw/p/10324269.html
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 拦截页面请求的更多相关文章
- 使用一个HttpModule拦截Http请求，来检测页面刷新(F5或正常的请求)
在Web Application中,有个问题就是:“我怎么来判断一个http请求到底是通过按F5刷新的请求还是正常的提交请求?” 相信了解ASP.NET的人知道我在说什么,会有同感,而且这其实不是一个 ...
- axios（封装使用、拦截特定请求、判断所有请求加载完毕）
博客地址:https://ainyi.com/71 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 Node.js 中使用 vue2.0之后,就不再对 vue-resource 更新 ...
- 利用Fiddler拦截接口请求并篡改数据
近期在测试一个下单的项目,出于安全角度考虑,测试了一个场景,那就是利用工具对接口进行拦截并篡改数据.将接口一拦截并篡改数据后,发现收货满满.开发默默接受了我的建议,并对代码进行了修改. 对于fiddl ...
- SNF快速开发平台MVC-EasyUI3.9之-Session过期处理和页面请求筛选
Session引发的异常 其中一个bug是这样的: 使用Firefox登录进入系统后,再打开一个Tab,进入系统页面,点击logout. 在回到前一个tab页面,点击Save按钮,出现了js错误.这个 ...
- Fiddler拦截http请求修改数据
1.拦截http请求 使用Fiddler进行HTTP断点调试是fiddler一强大和实用的工具之一.通过设置断点,Fiddler可以做到: ①修改HTTP请求头信息.例如修改请求头的UA,Cookie ...
- axios interceptors 拦截 , 页面跳转, token 验证 Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)
Vue+axios实现登陆拦截,axios封装(报错,鉴权,跳转,拦截,提示) :https://blog.csdn.net/H1069495874/article/details/80057107 ...
- Java 过滤器Filter，Java Filter 不拦截某些请求 Java 过滤器支持Ajax请求
================================ ©Copyright 蕃薯耀 2020-01-10 https://www.cnblogs.com/fanshuyao/ 一.Java ...
- python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求
一.JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...
- iOS 开发中使用 NSURLProtocol 拦截 HTTP 请求
这篇文章会提供一种在 Cocoa 层拦截所有 HTTP 请求的方法,其实标题已经说明了拦截 HTTP 请求需要的了解的就是 NSURLProtocol. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...
随机推荐
- [数学杂志]AML
Copied from: http://www.elsevier.com/journals/applied-mathematics-letters/0893-9659/guide-for-author ...
- MD5 两次加密
1.添加依赖 <dependency> <groupId>commons-codec</groupId> <artifactId>commons-cod ...
- js中的简单数据类型和复杂数据类型的存储
基本类型存储的是值而复杂数据类型也叫引用类型存储的是对象的地址如0x00001而在栈中存的是变量数值和函数参数 堆中存的是对象和数组 堆栈空间分配 栈(操作系统):由操作系统自动分配释放 ,存放函数的 ...
- 第30月第6天 git log
1. git log git log 96a6f18b1e0a1b7301cb4f350537d947afeb22bc -p -1 我们常用 -p 选项展开显示每次提交的内容差异,用 -2 则仅显示最 ...
- 通过go-ethereum源码看如何管理项目
今天抽空看了下go-ethereum项目的源码 ( https://github.com/ethereum/go-ethereum ),其中 ethereum 是github下的一个帐号.go-eth ...
- Python Day2 （二）
字典的操作: 见连接: http://www.cnblogs.com/alex3714/articles/5717620.html 第二天作业,修改haproxy配置文件. 程序练习 程序1: 实现简 ...
- python学习记录20181207
1.python中函数指针的用法 直接把函数名赋值给变量,不需要加上()和形参 如: def add(num1,num2): return num1+num2 fun = add 2.打印输出列表需要 ...
- About the Mean Shift
Mean Shift算法,一般是指一个迭代的过程.即先算出当前点的偏移均值,移动该点到其偏移均值,然后以此为新的起始点,继续移动,直到满足一定的条件结束. meanshift可以被用来做目标跟踪和图像 ...
- hdu4352 数位dp+状态压缩+一个tip
按照nlogn求lis的方法,把lis的状态压缩了,每次新加一个数就把它右边第一个数的位置置为0,然后把这个数加进去 一个需要注意的地方,如果前面都是0,那么状态s中代表0的位置不可以是1,因为这种情 ...
- URL.createObjectURL() 实现本地上传图片 并预览功能
URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL.这个 URL 的生命周期和创建它的窗口中的 document 绑定.这个新 ...