charles是一款mac的代理调试工具，用的最多的是抓包和代理。今天先介绍下利用Charles实现代理到本地，并将后端的response 改成自己想要的任何内容。主要用到Charles的map和rewrite功能。

1.map功能

map功能将某个请求进行重定向，用重定向后的内容来响应请求的内容；

Tools-->Map Remote :将某个网络请求重定向到另一个网络请求。只能替换请求地址信息，不能控制response。

Toos--->Map Local : 将某个网络请求重定向到本地的某个文件。可以自定义response内容，需用和rewrite功能搭配使用。

1.1Map Remote 

可以将网络请求重定向到其他地址，这样请求就redirect到了新的地址，返回的结果也就是新地址返回的。

1.2Map Local

配置上需要mock结果的请求地址，选择本地用来response的json文件（可以提前把正常请求返回的结果copy到文件里，再进行修改成自己想要的）

2.Rewrite

rewrite功能重写对应的内容，主要可以对某些匹配请求的header、host、url、path、query param、response status、body进行rewrite。

Tools --> Rewrite，双击打开

1.Enable Rewrite 启用rewrite

2.Add新建rewrite的内容，自定义命名

3.Location，可以Add Location，填写某个指定的请求地址，也可以在Host里用正则*匹配所有

4.Add具体要rewrite的内容

rewrite rule里的类型有好几种，简单说明如下：

• Header：
  • 作用：可以对请求或者响应的header内容进行操作，包括添加（Add Header）、修改（Modify Header）及删除（Remove Header）。
  • 使用场景：在需要对header进行处理时用到，例如为了用上某个环境数据，可能需要对应cookie，可以在请求的header中加上cookie信息；也可以重写响应header的信息；Map Local时，接口返回的数据需要设置response header，则用 Add Header补上正常response里的header信息。如：添加response的access-control-allow-origin

• host: 主要是对请求进行host修改，以达到本地请求获取指定host环境中的数据，常见于mock数据。

• path: 主要rewrite path内容使用指定rewrite规则的path来响应指定的请求path，它可以对paht进行裁剪。

• url:
  • 作用：修改url中某些部分，可以用别的url进行替换或者url裁剪时间戳或者md5等
  • 使用场景：场景使用非常多，既可以对host也可以对path进行rewrite，可以满足指定host下的请求重定向到其他host下对应path下
• query param:
  • 作用：可以对param进行操作，包括修改（Modify）、添加（Add）、删除（Remove）。
  • 使用场景：有时请求可能多传递了不必要的参数，这时可以rewirte功能去掉多余的参数；另外也可以添加请求必须而暂时无法提供的参数

• response status: 顾名思义就是对response的状态码进行rewrite；比方我想对一个指定页面A的访问重定向到另一个页面B，就可以用到这个。如下图：

• body：
  • 作用：对请求的响应内容做修改，一般是对某一个或几个值进行rewrite，用新的值来替代返回的值
  • 使用场景：可以用来mock数据，比方说在开发中为了测试功能需要请求的某个数组字段有值，但是当前环境无法给出，那么就可以使用该功能。若response的内容比较简单，则可以直接用rewrite里的body进行配置修改，不必用map local。

或替换返回结果中的某个值，比如返回的response里有value=test1，则可以将test1替换成test2

3.遇到的问题

1. rewrite添加了header后，刷新页面报错：Request header field token is not allowed by Access-Control-Allow-Headers in preflight response

错误原因：参考https://www.cnblogs.com/cc299/p/7339583.html

在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息）

三种场景：

1. 如果跨域的请求是Simple Request（简单请求 ），则不会触发“PreFlight”。Mozilla对于简单请求的要求是：

以下三项必须都成立：

1. 只能是Get、Head、Post方法

2. 除了浏览器自己在Http头上加的信息（如Connection、User-Agent），开发者只能加这几个：Accept、Accept-Language、Content-Type、。。。。

3. Content-Type只能取这几个值：

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

解决办法：在添加的access-control-allow-headers里，加上报错里提示缺少的那个，如