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. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...
随机推荐
- 第九节: 利用RemoteScheduler实现Sheduler的远程控制
一. RemoteScheduler远程控制 1. 背景: 在A服务器上部署了一个Scheduler,我们想在B服务器上控制这个Scheduler. 2. 猜想: A服务器上的Scheduler需要有 ...
- oldboy s21day09
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.将函数部分知识点,整理到自己笔记中.(搞明白课上讲的案例.) # 2.写函数,检查获取传入列表或元组对象 ...
- 在 Visual Studio 中使用 IntelliTrace 快照功能
今天发现vs2017 IntelliTrace有了一个快照功能,测试一下它的用法 1.选项->IntelliTrace->选择第三项 2.建一个控制台应用程序 3.在main中写一个简单的 ...
- Chrome firefox ie等浏览器空格 宽度不一样
用半角空格 或者全角空格 相当于半格中文字符的宽度, 相当于一个中文字符宽度. 注:在chrome中两个 占一个汉字的宽度;,而在IE.firefox中四个 才占一个汉字的宽度.
- 【vue】路由配置
一般组件我们会有全屏组件,或是在页面的某个部分显示组件,所以路由的第一层一般是全屏显示的,而在/目录下的组件为页面的某个部分显示的,通常需求是这样的,登录是全屏显示的,而普通页面是在页面的某个部分进行 ...
- codeblocks修改字体颜色-背景颜色
常用: 1. 编辑器背景-豆沙绿配置:色调85,饱和度123,亮度205: 2. 注释颜色-紫色:rgb(255,0,255): 参考: 改变codeblocks里面各种注释的颜色 常用颜色的RGB值 ...
- 【转】Java中的static关键字解析
一.static关键字的用途 在<Java编程思想>P86页有这样一段话: “static方法就是没有this的方法.在static方法内部不能调用非静态方法,反过来是可以的.而且可以在没 ...
- 【原创】大叔问题定位分享（24）hbase standalone方式启动报错
hbase 2.0.2 hbase standalone方式启动报错: 2019-01-17 15:49:08,730 ERROR [Thread-24] master.HMaster: Failed ...
- Python——plot可视化数据，作业8（python programming）
subject1k和subject1v的形状相同 # -*- coding: utf-8 -*- import scipy.io as sio raw_K = sio.loadmat('Subject ...
- 初学python之路-day02
python,诞生于1989年的圣诞,Guido van Rossum为了打发无聊,因此发明了python,并且开放了其源代码,使得这门语言在随后的几十年的发展的越来越广.现今,2.x版本已经在2.7 ...