企业官网建设流程全解析

武进网站建设咨询,建设人才信息网是什么网站,做网站怎么打空格,wordpress微博登陆whistle 介绍 背景 在开发移动端 原生 H5 或者 hybrid时#xff0c;会遇到需要抓包、mock数据等需求#xff0c;经过我自己的一番探索#xff0c;发现 whistle 这款工具十分好用。我经常运用于如下场景#xff1a; HTTP 代理Mock 数据抓包、配置规则 使用案例#xff1…whistle 介绍背景在开发移动端 原生 H5 或者 hybrid时会遇到需要抓包、mock数据等需求经过我自己的一番探索发现 whistle 这款工具十分好用。我经常运用于如下场景HTTP 代理Mock 数据抓包、配置规则使用案例比如我在处理图片接口时会遇到图片源403的问题这时候我们就可以通过 whislte 代理接口去除接口请求源从而能正常从服务器获取数据。又比如我需要模拟H5活动页中的特殊场景比如凌晨活动自动刷新功能 我不可能等到凌晨再刷新页面这时候就可以mock接口数据刷时间到凌晨从而完成刁钻的功能测试。whistle 介绍概念Whistle 是一款基于 Node.js 开发的跨平台网络抓包与调试代理工具。它通过在本地启动一个代理服务器拦截、转发并记录所有经过它的网络请求如 HTTP、HTTPS、HTTP/2、WebSocket 等从而帮助开发者查看、分析甚至修改网络数据极大地便利了前端开发、API 调试和移动端测试等工作 。地址https://github.com/avwo/whistle安装 whistle安装Whistlenpm install -g whistle启动服务w2 start访问配置页域名访问 http://local.whistlejs.com/问题安装https证书后访问网页可能会提示“您的连接不是私密连接”。这可能是由于证书没生效导致的。重启一下电脑即可。移动端调试注可以暂时先配置pc端调通了再配置移动端。whistle 证书配置查看代理地址nathanchenNathansMacBook-Pro ~ % w2 start [i] Whistle2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.0.0.1:8899/ http://172.16.8.200:8899/ Note: If none are accessible, check your firewall settings For help, see https://github.com/avwo/whistle [i] 2. Set your devices HTTP PROXY to the working IP PORT(8899) [i] 3. Open Chrome and visit http://local.whistlejs.com/ to begin配置流程“设置”“通用”“关于本机”“证书信任设置”。在“针对根证书启用完全信任”下开启对这个证书的信任*移动端查看页面基础信息XXX_5G172.20.9.210 // http://172.18.9.210:8080/photo?type-2快捷地址http://172.16.12.78:8080/移动端显示页面配置步骤确认网络连接确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。查找电脑的本地IP地址你需要知道电脑在局域网中的IP地址来代替localhost。macOS用户打开系统偏好设置网络可以看到IP地址通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。Windows用户在命令提示符中输入ipconfig查找IPv4 地址。在iPhone上访问本地项目在iPhone的Chrome浏览器地址栏中输入以下地址进行访问http://你的电脑IP地址:8080/photography?type-2例如如果你的电脑IP是192.168.1.100则访问http://192.168.1.100:8080/photography?type-2疑问与解答1本地项目移动端查看页面需求电脑本地启动项目访问地址为 http://localhost:8080/photography?type-2 开发者希望在 ios移动端的谷歌浏览器上查看页面请问该如何实现1本地项目移动端查看页面需求电脑本地启动项目访问地址为 http://localhost:8080/photo?type-2开发者希望在 ios移动端的谷歌浏览器上查看页面请问该如何实现实现步骤确认网络连接确保你的电脑和iPhone连接到同一个Wi-Fi网络。这是手机能够访问电脑本地服务的基础。查找电脑的本地IP地址你需要知道电脑在局域网中的IP地址来代替localhost。macOS用户打开系统偏好设置网络可以看到IP地址通常是192.168.x.x或10.x.x.x的形式。也可以在终端输入ifconfig查找。Windows用户在命令提示符中输入ipconfig查找IPv4 地址。在iPhone上访问本地项目在iPhone的Chrome浏览器地址栏中输入以下地址进行访问http://你的电脑IP地址:8080/photography?type-2例如如果你的电脑IP是192.xxx.1.100则访问http://192.xxx.1.100:8080/photography?type-2Weinre真机远程调试Weinre(Web Inspector Remote)是一款基于Web Inspector(Webkit)的远程调试工具 它使用JS编写 可以让我们在电脑上直接调试运行在手机上的远程页面。**使用场景**页面在手机调试在电脑。whistle内置Weinre1配置调试地址点击dev进入移动端调试页面2手机访问 H5 页面比如https://juejin.cn/user/28899398522058643在 Weinre 中调试页面whistle 实践移动端抓包基础配置手机和PC同一网络下网络配置代理 ⇒ 手动 ⇒ 配置服务器和端口nathanchen172 ~ % w2 start [i] Whistle2.9.103 started [i] 1. Use your device to visit these URLs and note which one works: http://127.2.0.1:8899/ http://172.18.9.200:8899/开发环境操作步骤1移动端访问本地开发网页http://你的电脑IP地址:8080/photo?type-22whistle 配置 weinre3weinre 调试移动端网页线上环境操作步骤1移动端访问网址https://m.xxx.com/2whistle 配置 weinrehttps://m.xxx.com weinre://xxxm3weinre 调试移动端网页同开发环境重定向**效果**重定向 github 到 baidu替换规则https://github.com https://www.baidu.com https://github.com redirect://https://www.baidu.com替换请求的数据摄影数据mock**需求**目前本地请求接口http://localhost:8080/photog/big接口返回部分数据在谷歌开发者工具中查看如下{code:200,msg:Succ,data:{list:[{uid:134923,avatar:https://img.xxx.com/test.jpg?image/0/w/400,username:test,fanCount:7,followCount:0,intro:test账号,cert:[],isTal:false,islow:true,...}开发者希望将list中的第一个项目的intro: “test账号”,改为intro: “nathan账号”,实现方案在 Values 中创建修改后的数据文件在 Whistle 界面点击Values标签。点击Create创建一个新的键值对例如键名设为modifiedResponse.json。在值的内容区域将完整的、修改后的 JSON 响应体粘贴进去确保已将intro: test账号改为intro: nathan账号。{code:200,msg:Succ,data:{list:[{uid:1349678,avatar:https://img2.xxx.com/test.jpg?imageView2/0/w/400,username:test账号,fanCount:7,followCount:0,intro:nathan账号,cert:[],isTal:false,islow:true,...// 确保其余结构和数据与原响应完全一致},...// 其余 list 项]}}编写并启用规则点击Rules标签在规则编辑框中输入上面提到的规则语句参考如下http://localhost:8080/app/photos/recommend/master?page1 resBody://{modifiedResponse.json}确保规则已启用。保存规则。验证结果回到您的浏览器打开开发者工具的Network选项卡。访问http://localhost:8080/photo/master页面使其再次请求目标接口。找到名为recommend/master?page1的请求查看其Response选项卡确认intro字段的值已成功变为nathan账号。权限问题图片 403问题描述当用户访问http://localhost:8080/photography/test页面时调用接口获取数据图片接口https://img.xxx.com/ps/2024/07/one/xxx1720691006008.jpg?imageMogr2/auto-orient/thumb/!500x500r/strip/quality/90返回状态码Status Code 403 Forbidden问题分析在项目中开发者一般通过给图片配置 referrerpolicy“no-referrer” 来解决问题img classcommission__wrap__arrow referrerpolicyno-referrer src./images/arrow__right.png /中的referrerpolicyno-referrer但是给项目的每个图片都这么配置感觉不够优雅。分析下原因是由于 图片服务器检查 Referer非白名单域名返回 403**配置方式**找到接口处理掉图片接口的Referer即可# 图片防盗链 img2.xxx.com referer:// img4.xxx.com referer://问题与参考问题无法代理本地前端项目localhosthttps://github.com/avwo/whistle/issues/1145参考为什么推荐使用Whistle而不是Fiddler、CharlesWhistle 让你满意的代理工具Whistle 开发调试最佳实践