一、概要

先看图

京豆多的离谱，你的第一想法肯定是：按F12修改了网页元素

没那么简单，你看支持刷新的

肯定还是假的，通过 Fiddler 或 Wireshark 等抓包工具修改了响应包；或者干脆改了本地host文件，指向了一个自己写的页面......

这些都太麻烦了，如果能在当前网页上拦截这个请求，并修改返回值，那才是最简单的

二、尝试

一个简单的ajax请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>test</title>

</head>

<body>

    <div>

        <input type="button" value="get_data" id="xhr_get">

    </div>

    <div>

        <p>id -> <span id="id"></span></p>

        <p>title -> <span id="title"></span></p>

        <p>userId -> <span id="userId"></span></p>

        <p>body -> <span id="body"></span></p>

    </div>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

    <script type="text/javascript">

        $('#xhr_get').on('click', function () {

            $.ajax({

                url: 'https://jsonplaceholder.typicode.com/posts/1',

                type: 'GET',

                success: function (data) {

                    $('#id').text(data.id);

                    $('#title').text(data.title);

                    $('#userId').text(data.userId);

                    $('#body').text(data.body);

                }

            });

        });

    </script>

</body>

</html>

运行起来，点下按钮看看

如何拦截这个ajax请求并修改返回内容呢？

可以实现一个自定义的构造函数重写默认的XMLHttpRequest构造函数，使其在触发实际事件之前重写响应即可。按F12在控制台向页面注入代码试试

再次点击按钮，页面已经渲染到新的值了

由此证明，这条路是行的通的，但是不能每次都按F12注入，应该做到自动注入，并把所有拦截规则维护起来

三、Chrome插件

浏览器插件最适合做这个了，新建一个Chrome插件，命名：ModifyAjaxResponse

manifest.json

{

    "manifest_version": 3,

    "name": "ModifyAjaxResponse",

    "description": "Modify response text of ajax requests",

    "version": "1.4.0",

    "content_scripts": [

        {

            "matches": [

                "<all_urls>"

            ],

            "js": [

                "content_scripts.js"

            ],

            "run_at": "document_start"

        }

    ]

}

"run_at": "document_start"，页面加载之前就注入 content_scripts.js，看看其内容

const script = document.createElement('script');

script.setAttribute('type', 'text/javascript');

script.setAttribute('src', chrome.runtime.getURL('dist/pageInjectScript.js'));

document.documentElement.appendChild(script);

向每个页面动态加载 pageInjectScript.js，用来重写默认的 XMLHttpRequest 构造函数，实现拦截页面 ajax请求的。打开博客园测试一下

可见 pageInjectScript.js 已经加载进来了，这个不是博客园服务器返回的，而是通过Chrome插件注入到页面上的

还差一个维护所有拦截规则的页面。使用 Chrome API 自带的存储 chrome.storage.local 保存即可。看看最终效果

至此，可以指哪打哪，随意修改页面展示内容了

四、总结

本插件当然不是改京豆数量自嗨用的，实际用途和开发初衷是：前后端对接接口，前端利用本插件，可以快速得到不同的返回值

注：

1）本方法仅重写XMLHttpRequest构造函数，F12网络面板里看到的还是原始返回值，但代码可以获取修改后的值；

2）非开发时间请关闭插件，避免向页面注入无用js

五、相关阅读

修改Ajax返回内容

油猴脚本重写fetch和xhr请求

ajax-interceptor

六、下载

源码：https://github.com/oppoic/ModifyAjaxResponse

Chrome 商店：https://chrome.google.com/webstore/detail/modifyajaxresponse/odpiadnfijfeggnnodoaaphkkjkmpnia

注：访问不了 Chrome 商店的话，下载源码本地加载src目录

ModifyAjaxResponse，修改ajax请求返回值，前后端调试之利器的更多相关文章

  1. 微信浏览器Ajax请求返回值走error

    微信浏览器Ajax post请求是返回值走的error $.ajax({ type: "POST", url: "https://XXXX", cache: f ...

  2. AJAX请求,返回json进行页面绑值

    AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...

  3. Jquery ajax 得到返回值

    Jquery ajax 得到返回值 1.ajax默认是异步调用的,所以得到的返回值是空值,要得到值必须改成同步:async: false,//同步. 2.必须定义一个全局变量 var result = ...

  4. ajax请求返回数据，模板中的数据处理

    /*ajax请求返回数据,模板中的数据处理*/ function QueryGameAsset(){ var new_start_time=$('#new_start_time').val();//开 ...

  5. 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法

    在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...

  6. jQuery中ajax如何返回值到上层函数

    jQuery中ajax如何返回值到上层函数 一.总结 一句话总结: ajax的同步操作即可,设置 async: false, 二.jquery的同步操作 var can_submit=true; $. ...

  7. charles_01_打断点修改接口请求&返回数据

    前言 测试过程中,为了模拟某场景测试,经常需要修改接口请求或者返回数据.可通过抓包工具打断点,实现模拟测试场景.常用的抓包工具charles和fiddler均可打断点mock数据.由于小编安装了cha ...

  8. 前后端分离的利器：fiddler的实用功能举例

    # 前后端分离的利器:fiddler的实用功能举例 ##what's fiddler fiddler是一款代理软件,对于前后端分离开发非常重要.可以说,如果前端开发没有用上fiddler或类似软件,那 ...

  9. Ajax与json在前后端中的细节解惑

    ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...

  10. 关于IE浏览器 ajax 请求返回数据不对的问题

    在使用ajax向后台发送请求的时候,在使用ie 进行调试的时候发现根据条件进行查询时,返回的数据与没有根据条件进行查询时数据相同,也就是条件没有发生作用. 经过同事的帮助发现ajax初始化设置时没有c ...

随机推荐

  1. pysimplegui之第一个程序，包括回调函数，事件，阻塞等待内容

    自定义窗口 API 调用(您的第一个窗口) 总结一下:我遇到的坑, 比如拿输入框的内容的时候可以直接通过value[key] 几种窗口模式就是什么时候用timeout这个参数 关闭窗口可以的一边形式 ...

  2. [Linux/Apache Http]Apache Http(d)服务访问时报: 403 Forbidden You don't have permission to access /cdh/ on this server.

    1 问题描述 http错误代码403:403 Forbidden 资源不可用.服务器理解客户的请求,但拒绝处理它.通常由于服务器上文件或目录的权限设置导致. 2 解决思路 胜利的果实: 确保关闭sel ...

  3. Nordic芯片烧录指南

    本文讲介绍Nordic系列芯片的烧录方式 一.准备工作 1.硬件 首先需要准备一块Nordic的DK或者Jlink,但是需要注意的是x宝购买的盗版Jlink因为没有license,用一段时间可能会被锁 ...

  4. day90:luffy:基于vue+drf的路飞学城项目前端部署

    目录 1.域名备案 2.域名解析 3.设置安全组 4.部署架构图 5.一些准备工作 6.docker 7.把前端项目通过nginx容器来运行 后端部署传送门:基于vue+drf的路飞学城项目后端部署 ...

  5. DG修复：清理归档配置归档清理脚本

    问题描述:DG同步断了十天,发现FRA归档盘符满了.需要清理下,重新增量恢复DG Error 12528 received logging on to the standby FAL[client, ...

  6. Nvidia GPU热迁移-Singularity

    1 背景 在GPU虚拟化和池化的加持下,可以显著提高集群的GPU利用率,同时也可以较好地实现弹性伸缩.但有时会遇到需要GPU资源再分配的场景,此时亟需集群拥有GPU任务热迁移的能力.举个简单的例子,比 ...

  7. Yii初学者必看-yii 表单验证规则

    对yii深入了解总结出:希望对初学者有些帮助 Active Record (AR) 是一个流行的 对象-关系映射 (ORM) 技术. 每个 AR 类代表一个数据表(或视图),数据表(或视图)的列在 A ...

  8. devops-5：从0开始构建一条完成的CI CD流水线

    从0开始构建一条完成的CI CD流水线 前文中已经讲述了静态.动态增加agent节点,以动态的k8s cloud为例,下面就以Maven构建Java程序为例,开始构建出一条完整的CI CD流水线. 实 ...

  9. Callback详解

    Callbacks Callback Registration 在 Rails 中,回调(Callbacks)是一种在模型对象的生命周期中执行特定代码的机制.回调可以在模型对象的创建.更新.删除等操作 ...

  10. R的基本用法2

    title: "Lectures" author: '01' date: "2022-09-23" output: pdf_document knitr::op ...