解决本地请求跨域问题，替换代理，Whistle + chrome扩展工具SwitchyOmega

一、Whistle

1.安装Whistle

Whistle官方文档

npm install -g whistle

2.启动服务

w2 start

3.访问配置页面

• 方式1：域名访问 http://local.whistlejs.com/
• 方式2：通过ip+端口来访问，形式如 http://whistleServerIP:whistlePort/ e.g. http://127.0.0.1:8899
  

Whistle 域名替换规则

以下访问github，将出现baidu首页
https://github.com https://www.baidu.com

二、安装Chrome代理插件 SwitchyOmega

代理服务器配置为 Whistle配置页面的访问地址

三、实际解决跨域场景

本地请求接口，出现跨域错误 ?

可以在Whistle中设置域名替换规则


然后在代码里更改请求接口的地址

再运行项目，访问代理的项目运行地址 http://local.qq.com… 界面正常显示，跨域问题消失，接口成功请求，network中请求接口的url显示为“http://local.qq.com/req/…”，经过代理后，实际请求的为 “https://v.qq.com/…”

四、安装Whistle根证书

开启 SwitchyOmega 的proxy后，没有在Whistle中配置的网站将不能访问，报错“您的连接不是私密连接”，如下图

需要安装Whistle的根证书才可以正常访问其他网站

五、hmr-runtime.js:29 WebSocket connection to ‘ws://…’ failed

这个不知道怎么解决还