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. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...
随机推荐
- kafka全部数据清空与某一topic数据清空
1. Kafka全部数据清空 kafka全部数据清空的步骤为: 停止每台机器上的kafka: 删除kafka存储目录(server.properties文件log.dirs配置,默认为“/tmp/ka ...
- 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法
一. 背景 上一个章节,介绍了EF调用两类SQL语句,主要是借助 ExecuteSqlCommand 和 SqlQuery 两个方法来完成,在本章节主要是复习几类存储过程的写法和对应的EF调用这几类 ...
- [再寄小读者之数学篇](2014-10-27 Frobenius 范数是酉不变范数)
对任两酉阵 $U,V$, 有 $$\bex \sen{A}_F=\sen{UAV}_F. \eex$$ 事实上, $$\beex \bea \sen{UAV}_F^2&=\tr(V^*A^*U ...
- [译]Ocelot - Delegating Handlers
原文 可以为HttpClient添加delegating handlers. Usage 为了添加delegating handler需要做两件事. 首先如下一样创建一个类. public class ...
- input全选和取消全选
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- Android app中的so库和CPU架构
一.android目前有几种cpu架构? 早期的Android系统几乎只支持ARMv5的CPU架构,目前支持七种CPU架构:ARMv5,ARMv7 (从2010年起),x86 (从2011年起),MI ...
- $a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 转成[[1,a],[2,b],[3,c],[4,d],[5,3]]
$a=[1,2,3,4,5]; $b=[a,b,c,d,e]; 结果 [[1,a],[2,b],[3,c],[4,d],[5,3]] return array_map(function($v1,$v2 ...
- 新增项目到GIT仓库中
在本地新建项目的目录中打开Git Bash命令行工具 运行以下命令,设置全局信息(包括用户名,邮箱地址) git config --global user.name "你的姓名" ...
- kafka_2.11-2.1.0测试
kafka测试启动创建topic ./kafka-topics.sh --create --zookeeper dip005:2181,dip006:2181,dip007 --replication ...
- php curl使用