Fiddler前端实战应用--01--请求代理

作为一名前端，跨域问题总是避免不了。解决跨域问题的方法无非就是JSONP，CORS和请求代理。但在实现在项目开发环境中，JSONP和CORS其实用的不多，而请示代理却是最常用也是最好用的。

请求代理的方法其实也有很多种。前端常见的有：

1. webpack自带的代理， 直接在webpack的devServer里的proxy里设置以下代码就可以了。

// /api 匹配请求的匹配值，如果请求包含/api，则会走代理
'/api': {
	// targetURL 你要代理到的目标服务器
    target: 'targetURL',
    changeOrigin: true, 
    // 重写请求中的/api为/
    pathRewrite: {
      '/api': '/'
    }
  }

优点：直接在项目的配置文件里就可以修改，不需要借助其他的工具，只要你的项目是用webpack作构建工具

缺点：每一次更换目标服务器都需要重启整个前端项目，特别是对大些项目，对接的后端又多，项目又大，启动一次都要个两三分钟。

2. 使用nginx作反向代理

这个更多的是在生产环境由运维来配置，当然你也可以在自己的本地来配置，不过需要先安装，然后在配置文件来配置对应的代理目标服务器。

优点：配置很强大

缺点：对于前端来说，一个是学习的成本问题，二个是每次都要去修改配置文件实在是不够方便。

如何用fiddler实现请求代理

之前几种请求代理的方式的缺点主要是麻烦，那有没有一种方式不那么麻烦呢？

有，一种就是用fiddler工具

1. 首先，你得安装fiddler工具，至于怎么下载安装这里就不讲了，网上一大把, 不过我建议是装 flddler web debugger 版本的

2. 安装好了，你就可以看到如下界面：

3. 找到下图红色框AutoResponder，单击进入

4. 进入AutoResponder，点击Add Rule,则会添加

5. 编辑规则，比如

本地请求： http://localhost:8000/api

目标请求： http://10.16.85.137

你就可以这样设置

上图匹配规则用了正则表达式来匹配，所以本地请求开头包含http://localhost:8000/api，就会跳转到http://10.16.85.137

在这里你就完成了一个请求代理

#####AutoResponder 设置

`Enable rules`: 是否启用规则, 这里肯定是要勾选

`Umatched requests passthrough`: 未匹配到的请求是否能正常请求，最好是勾选

`Enable Latency`: 是否启用延时，启用之后你可以在规则里设置请求延迟时间

匹配规则

（1）纯粹字符串匹配

Fiddler将会按照不区分字母大小写来匹配字符串。

Demo如下：

（2）前缀NOT匹配

跟上面的类似，Fiddler还有一个非字符串匹配的规则：NOT：该规则会匹配url中不含给定字符的所有请求

Demo如下：

（3）前缀EXACT匹配

表达式以EXACT：为前缀，此匹配区分字母大小写

（4）前缀REGEX匹配

正则表达式：Fiddler支持以regex:为前缀的正则表达式语法，

使用.+匹配一个或多个字符，

使用.*匹配0个或多个字符，

使用^匹配字符串开始位置，

使用$匹配字符串结尾位置。

Demo如下：

※注：选项字符串(?insx)的功能如下：它会启动大小写敏感限制，要求显示捕获组，支持单行语义，支持使用#符号添加注释

3、设置响应字符串

一些返回的actiontext如下

※注:标蓝色区域的内容为平时较常用的部分

可以参考这篇文章
Fiddler中使用AutoResponder创建规则替换线上文件