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. 由于文章的内容较长,会分成两部分,这篇文章介绍 ...
随机推荐
- wxpython多线程间通信
#!bin/bash/python # -*- coding=utf-8 -*- import time import wx from threading import Thread from wx. ...
- 【汇总目录】Java
疯狂Java学习笔记 [2019年03月20日] Lambda表达式与函数式接口 [2019年03月20日] Lambda表达式概念与基本语法 [2019年03月18日] 内部类 [2019年02月1 ...
- Map和Collection
Map:key---Value(一对儿数据) HashMap:无序存放,key不允许重复 HashTable:无序存放,key不允许重复 key是set集合,value是collection集合 Co ...
- java获取上个星期第一天和最后一天
package com.goldcn.jzgmanageplat.b2b.controller; import java.text.SimpleDateFormat;import java.util. ...
- 【先验知识归纳】Flask快速入门
本文参考:快速入门 - Flask 0.10.1 文档 路由 Flask使用route修饰器来关联URL与程序函数: @app.route('/') def hello_world(): return ...
- Docker入门-docker-compose使用(二)
Docker Docker容器大行其道,直接通过 docker pull + 启动参数的方式运行比较麻烦, 可以通过docker-compose插件快速创建容器 1.安装docker-compose ...
- WPF 之 调用线程必须为 STA,因为许多 UI 组件都需要
WPF中,代码中准备控制控件内容时,有时会报错:“ 调用线程必须为 STA,因为许多 UI 组件都需要 ”. 如在winform下面,使用多线程时,控件的值读取是可以的,但如果要更改,那么就必须进行一 ...
- LNMP 下使用命令导出导入 MySQL 数据库
导出数据库 导出数据库为 db_wp.sql.gz 文件: 1 mysqldump -u数据库用户名 -p数据库密码 --add-drop-table --complete-insert 数据库名 | ...
- 最简单有效的关于linux下配置Git操作免登录ssh公钥
ssh-keygen -t rsa -b 4096 -C “someone@xxx.com” 然后回车三连击… 进入目录(执行cd ~/.ssh),可以看到当前目录下多出两个文件 id_rsa.pub ...
- 【原创】Linux基础之curl
http请求过程如下: # curl -v http://www.baidu.com % Total % Received % Xferd Average Speed Time Time Time C ...