Vite结合whistle实现一劳永逸开发环境代理方案

目录
  • 开发环境面临的跨域问题
  • 常用代理方案
    • Vite自带代理支持
    • whistle代理「推荐」
  • whistle 代理配置
    • 1. 安装whistle
    • 2. 启动whistle
    • 3. 安装插件
    • 4. Proxy SwitchyOmega配置
    • 5. whistle rules配置
    • 6. 开启代理开关
  • 巧用 whistle
    • whistle rules相关配置
    • Vite工具库设置
  • 代理方案效果对比

开发环境面临的跨域问题

我们用webpackvite等工具开发本地项目时,浏览器一般会输入的域名是:127.0.0.1:3000来调试页面。当要请求三方接口时「随便拿个api来举例子」,就会发生下面情况。。。

目标服务器拦截了你的请求,因为它们做了网关保护策略,这种情况称为:请求跨域。
但在测试和线上环境不存在,因为https://api.juejin.cn 服务器的网关拦截层对2个环境添加了白名单,所以不会出现跨域error。

那么问题来了,我们开发时也想调用https://api.juejin.cn的接口来获取数据,怎么办??有下面几种方法:

  • 让https://api.juejin.cn为127.0.0.1:3000开发白名单;
  • 使用mock平台或者本地制造假数据;
  • 通过网关代理;
  • 方案1是最简单但最危险的。一旦远程服务给本地开了白名单,相当于别人也能在本地来攻击你的服务器,服务没漏洞还好,一旦服务入侵后给你个删库跑路岂不是爽歪歪。
  • 方案二也有弊端,主要体现在代码入侵和代码恢复。是否调用mock平台可以根据环境变量来识别,但也要等后端同学把api挂上mock平台还要做适配,无疑增加别人的工作;本地造假数据就不说了,代码入侵强不单止,当数据结构复杂时,还要联动多处修改,这些改动假如在上线前没一一恢复,那就等运维给你打电话处理线上bug吧。
  • 方案三通过对资源|请求的拦截,把127.0.0.1:3000/api/xxx请求路径转发到https://api.juejin.cn/api/xxx,并取消跨域限制,最终拿到远程数据。

小结一下:方案3无论重代码入侵还是开发依赖都比较小,也是目前较为主流的调试方式,固下面会对这种方案展开细述。

常用代理方案

改本机代理或者用三方代理软件拦截请求

需要额外较多的学习成本与环境搭建,舍弃了;

Vite自带代理支持

vite.config.ts配置代理:把127.0.0.1:3000重定向到目标域名上,通过服务端能力跳过跨域限制:

这样就可以把127.0.0.1:3000/example1的api转发到https://xxx.com/example1上,并且忽略跨域限制。

但这样做有弊端的:因为你访问的url为127.0.0.1:3000,所以凡是项目中涉及到三方请求(如三方鉴权服务返回的302登录跳转、跨服务合作api等)都要在这里配上,接下来可能的样子是这样的。。。

当然上面有夸张成分,但是也反馈给我们一个事实:三方业务是一个不可预知的黑盒,你不知道有多少关联的约束,因此在代理这块不应该做“加法”,而要做“减法”。

whistle代理「推荐」

Whistle是一款类似fiddler、charles抓包工具,功能强大,你可以在这里找到更多信息。

先认识下whistle基本的代理配置:

# {浏览器访问的域名} {转发到的目标地址} 其他options「resCors://enable代表忽略跨域限制」
//baidu.com //127.0.0.1:3000 resCors://enable

这样就能当你访问baidu.com时,浏览器出来是127.0.0.1:3000的内容。
基础套路搞懂了,那接下来就说说如何用whistle做“减法”,达到一劳永逸的效果。

whistle 代理配置

1. 安装whistle

npm install -g whistle

2. 启动whistle

# 启动
sudo w2 start

# 关闭
sudo w2 stop

3. 安装插件

安装Chrome代理插件Proxy SwitchyOmega,就是个代理选择器,不用配本地网络实现不同代理的快速切换。

4. Proxy SwitchyOmega配置

把你的whistle代理服务加入到Proxy SwitchyOmega中。

点击插件中的“选项”,参考以下进行配置:

5. whistle rules配置

打开whistle页面127.0.0.1:8899,左侧新建1个rules,将项目src/.whistle(见下文的rules配置)内容粘贴上去,保存。

6. 开启代理开关

Proxy SwitchyOmega插件选择你要指定的代理「第4步截图是“whistle”」,之后访问远程url即可(如my.com)。

巧用 whistle

whistle rules相关配置

假如你项目远程域名是my.com,rules配置如下:

# 路径:src/.whistle
# whistle配置,把所有内容粘贴到whistle的rules即可
# 打入环境变量「有需要自行添加」
//my.com jsPrepend://{paas.js}

# 关闭跨域限制
* resCors://enable

# 指定相关地址走本地,其他走远程「window系统把域名前“//”去掉」
^my.com$ //127.0.0.1:3000 resCors://enable
//my.com/%23/ //127.0.0.1:3000/%23/ resCors://enable
//my.com/node_modules/ //127.0.0.1:3000/node_modules/ resCors://enable
//my.com/src/ //127.0.0.1:3000/src/ resCors://enable
//my.com/@vite/ //127.0.0.1:3000/@vite/ resCors://enable
//my.com/@id/ //127.0.0.1:3000/@id/ resCors://enable

逐行说明:

第2行//my.woa.com jsPrepend://{paas.js}:指定mock文件,command + 左键 会自动帮你创建paas.js文件,只需在里面写上你的js代码就行了,到后面访问my.com时会先执行你的逻辑,这里 有官方说明,就不再重复说了。这样做的目的是增强框架的mock能力,灵活构造本地环境。

第5行* resCors://enable:关闭所有跨域限制。这样做之后,无论你项目有多少三方业务黑盒,都能不受跨域限制,是“减法”的关键步骤。

8~13行:指定相关地址走本地,其他走远程,包括:document、路由页、vite开发环境的资源加载固定列表等。这样就能在全部请求减去指定资源后都走远程。

Vite工具库设置

只配置 whistle 不配置 vite 的话,访问页面会不停地刷新。(github issue:vite always refresh and connecting )

为了解决这个问题,需要在 vite.config.js 中配置 hmr策略,只涉及127.0.0.1 host资源才启动hmr:

export default defineConfig(({ command, mode }: ConfigEnv) => {
  return {
    // ...其他配置

    server: {
      hmr: {
        protocol: 'ws',
        host: '127.0.0.1'
      }
    }
  };
});

至此,只要本地项目启动后,在浏览器输入my.com后,页面加载是你的本地项目,而且涉及三方请求时,也能绕过跨域限制,做到远程环境的拟真。

代理方案效果对比

看下上面介绍2种代理方案的框架流程图:

  • Vite代理方案: 在本地服务器的基础上,不断加要跨域的proxy,随着对接的服务增加,前端开发环境呈现堆雪球式的配置叠加,并不是个好办法;
  • whistle代理: 开始时就默认所有proxy都能跨域,只要把不走代理的资源|路径exclude出来即可,符合计算机工程学的“减法”规则。

以上就是Vite结合whistle实现一劳永逸开发环境代理方案的详细内容,更多关于Vite whistle环境代理的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vite多环境配置项目高定制化能力详解

    目录 业务背景 多环境场景的业务形态 Vite多环境方案实现 多模式文件配置 自定义环境变量 Vite默认环境变量 通过插件透传环境变量 客户端环境差异定制 效果图 解决的业务场景思考 业务背景 近些年来,随着前端工程架构发展,使得前端项目中也能拥有如后端工程的模块能力.正所谓 “能力(越)越大(来),责任(越)越大(卷)”,现在的前端工程不仅仅要满足业务需求,还伴随更多复杂的环境适配问题,例如: api请求的域名会根据不同环境而不同: 线上环境和测试环境在打包策略有所不同「如线上要隔离sour

  • vue3 vite异步组件及路由懒加载实战示例

    目录 引言 一.前言 1-1.三点变化: 1-2.引入辅助函数defineAsyncComponent的原因: 二.Vue 2.x与Vue 3.x定义比较 2-1.异步组件/路由定义比较 2-2.声明方式比较 2-3.异步组件加载函数返回比较 三.Vue3实践 3-1.路由懒加载实现 3-2.异步组件实现 四.总结 引言 在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异

  • Vite vue3多页面入口打包以及部署踩坑实战

    目录 为什么需要多入口? 一.改造项目 二.vite.config.ts配置 三.部署 总结 为什么需要多入口? 公司原生的移动端上需要用webview引入一些性能要求不高的H5页面,初步考虑后选择用vue试个水,前期页面跳转选择使用vue-router,测试过程中在安卓高版本下右滑返回效果尚可,ios端初步尝试使用的最左侧touch事件移动距离检测以及router判断index添加过场动画,但是整体的效果依然达不到下图的效果. 原先项目中是使用多个html页面以及原生自带的协议去打开html,

  • vue3+vite使用jsx和tsx详情

    目录 安装@vitejs/plugin-vue-jsx 配置vite.config.js 使用实战 第一种写法使用this 第二种写法 第三种写法 安装@vitejs/plugin-vue-jsx yarn add -D @vitejs/plugin-vue-jsx npm i -D @vitejs/plugin-vue-jsx 配置vite.config.js ... import vueJsx from '@vitejs/plugin-vue-jsx'; export default def

  • 如何用Vite构建工具快速创建Vue项目

    目录 和Webpack相比,Vite具有以下特点 Vite构建Vue项目 构建过程可能会发生的一些问题 总结 和Webpack相比,Vite具有以下特点 1.快速的冷启动,不需要等待打包 2.即时的热模块更新,真正的按需编译,不用等待整个项目编译完成 Vite构建Vue项目 前提:安装Node.js和Vite 第一步通过npm创建Vite项目 npm init vite-app 项目名称 # 例如 npm init vite-app HelloVue 第二步当项目创建成功后,cd到项目目录 cd

  • Vite结合whistle实现一劳永逸开发环境代理方案

    目录 开发环境面临的跨域问题 常用代理方案 Vite自带代理支持 whistle代理「推荐」 whistle 代理配置 1. 安装whistle 2. 启动whistle 3. 安装插件 4. Proxy SwitchyOmega配置 5. whistle rules配置 6. 开启代理开关 巧用 whistle whistle rules相关配置 Vite工具库设置 代理方案效果对比 开发环境面临的跨域问题 我们用webpack或vite等工具开发本地项目时,浏览器一般会输入的域名是:127.

  • vue3+vite中开发环境与生产环境全局变量配置指南

    目录 一.开发环境和生产环境 二.配置环境变量 三.使用全局变量 总结 一.开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境. 生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了. 对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容. 例如: 开发环境时,我们可以请求自己本地的接口(‘/api’ prox

  • 详解vue-cli项目开发/生产环境代理实现跨域请求

    开发环境中跨域 使用vue-cli创建的项目,开发地址是localhost:8080,需要访问非本机上的接口http://192.168.0.112:8080/cms/queryMaterial.不同域名之间的访问,需要跨域才能正确请求.跨域的方法很多,通常都需要后台配置,不过vue-cli创建的项目,可以直接利用node.js代理服务器,通过修改vue proxyTable接口实现跨域请求.在vue-cli项目中的config文件夹下的index.js配置文件中,修改前的dev: dev: {

  • PyCharm搭建一劳永逸的开发环境

    本文已经收录于最新版的 <PyCharm中文指南>更多 PyCharm 使用技巧,可前往在线文档学习:<PyCharm 中文指南>2.0 在线文档 在开发过程中难免遇到开发半小时,环境整半天的尴尬. 有时候自己辛苦在自己电脑上搭建的环境,却只能自己使用,无法复用给同事,这就造成了团队劳动力的极度浪费. 在这里,明哥会给你介绍一种方法,可以让你辛辛苦苦在自己电脑上搭建的 Python 项目运行环境,打包给你的同事们,让他们享受你的劳动成果. 1. 下载安装 Vagrant vagra

  • Vite开发环境搭建详解

    目录 Vite初始化项目 集成Vue-Router 集成Vuex 集成Git提交验证 集成Eslint 配置alias ​Vite​​​现在可谓是炙手可热,可能很多小伙伴还没有使用过​​Vite​​​,但是我相信大多数小伙伴已经在使用​​Vite​​​了,因为是太香了有没有.可能在使用过程中很多东西​​Vite​​​不是配置好的,并不像​​Vue-cli​​配置的很周全,那么今天就说一下如何配置开发环境,其中主要涉及到的点有一下几个: TypeScript Vuex Vue-Router E2E

  • 详解vue-cli开发环境跨域问题解决方案

    前后端分离开发中必要会遇到的问题-跨域.在使用vue开发的时候,开始为了解决跨域问题.采用的是CORS(Cross-origin resource sharing).后台在响应头中添加Access-Control-Allow-Origin.这样就可以跨域调后台接口了. 在前几天无意中看到了config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域 开发期间的API代理 当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API.为了实现这一点,

  • struts2.3.24+spring4.1.6+hibernate4.3.11+mysql5.5.25开发环境搭建图文教程

    struts2.3.24 + spring4.1.6 + hibernate4.3.11+ mysql5.5.25开发环境搭建及相关说明. 一.目标 1.搭建传统的ssh开发环境,并成功运行(插入.查询) 2.了解c3p0连接池相关配置 3.了解验证hibernate的二级缓存,并验证 4.了解spring事物配置,并验证 5.了解spring的IOC(依赖注入),将struts2的action对象(bean)交给spring管理,自定义bean等...并验证 6.了解spring aop(面向

  • 利用docker-compose搭建AspNetCore开发环境

    使用docker-compose搭建AspNetCore开发环境 1 使用docker-compose搭建开发环境 我们的目标很简单:使用docker-compose把若干个docker容器组合起来就成了. 首先使用Nginx代理所有的Web程序,这样只需要在主机上监听一个端口就可以了,不污染主机.再组合各Web程序.Redis/Memcached.SqlServerOnLinux. 新建一个目录sites,所有和集群相关的都放在这里,目录结构如下所示 sites     nginx      

  • VS2017 Cordova Ionic2 移动开发环境搭建教程

    分享VS2017 Cordova Ionic2 移动开发环境搭建教程 1. 文档概述 本文档用于说明Visual Studio 2017下使用 Ionic 2进行跨平台开发的运行环境配置. 2. 安装环境 Windows10 3. 安装Visual Studio 2017community 3.1 官方下载地址:https://www.visualstudio.com/downloads/ 3.2 运行安装程序,需选中使用JavaScript的移动开发,如下图所示. 3.3 进行VS2017扩展

  • 浅谈SpringMVC+Spring3+Hibernate4开发环境搭建

    早期的项目比较简单,多是用JSP .Servlet + JDBC 直接搞定,后来使用 Struts1(Struts2)+Spring+Hibernate, 严格按照分层概念驱动项目开发,这次又使用 Spring MVC取代Struts来进行开发. MVC已经是现代Web开发中的一个很重要的部分,下面介绍一下SpringMVC+Spring3+Hibernate4的开发环境搭建 先大致看一下项目结构: 具体的代码不再演示,主要是走了一个很平常的路线,mvc-servcie-dao-hibernat

随机推荐