代理配置 - kscarrot/blog GitHub Wiki

host & nginx

修改host配置可以将域名解析到我们需要的端口上

vim /etc/hosts

通常我们也会借助 Switchhost这样的工具来配置多场景 以及快速切换

开发时另外配置nginx进行反向代理

brew install nginx
# 会打印配置相关的目录信息
# brew 安装的nginx 目录地址和直接安装不太一样
# 正常会在 /usr/local/etc/nginx下
open /opt/homebrew/etc/nginx
nginx
# 查看启动状态
ps -ef | grep nginx
# http://localhost:8080/ 访问默认反代配置
nginx -t # 检查配置
nginx -s reload # 重启ng

配置参考 nginx 极简教程

whistle

解决什么问题

  1. host文件配置不够灵活 多环境域名通常可以用正则完全表达出来
  2. 多个环境切换host很痛苦 而且需要清缓存 chrome://net-internals/?#dns
  3. 多维护一个开发nginx配置
  4. 代理移动端机器比较恶心

安装与配置

# 安装
brew install whistle
# 启动
w2 start
# 安装根证书
w2 ca --enable-https

访问http://127.0.0.1:8899/

一级Tab -> Settings -> Use multiple rules 勾选

新建规则 配置并启用

local-*.<domain>.com 127.0.0.1:<port> reqHeaders://(X-Forwarded-Proto=https)

whistle配置文档

安装浏览器插件

插件地址Switch Omega

绑定whistle

插件配置->情景模式->proxy 配置whistle的代理 127.0.0.1 端口8899

配置auto switch

插件配置 -> 情景模式 -> auto swtich 配置需要代理的域名 可以使用通配符 命中模式的使用whistle代理,没有命中的直连即可

常见问题

  • vite热更新失效 指定 vite配置文件 hmr.protocol 为 ws
  • reqHeaders://(X-Forwarded-Proto=https)不生效 new Koa指定 proxy 为true

移动端代理

需要在同一wifi内

打开移动端设备的wifi配置 配置代理为手动 指定本机ip 和默认端口 8899 扫码安装证书 然后信任自定义根证书即可

script注入

rules htmlAppend

www.baidu.com htmlAppend://{console}

values console

<script>console.log('脚本注入')</script>

支持cdn直接引用 可以方便的引入 vConsole eruda这类的调试工具

⚠️ **GitHub.com Fallback** ⚠️