使用Charles拦截项目接口映射请求本地json文件

为什么要把接口数据配置到本地json文件里？

相信有很多跟我一样的前端同学遇到：

• 很久之前【公司项目】无法启动，原因接口请求不到了（权限给你踢了，服务器换了等）
• 【面试的时候】，需要展示之前做过的项目（用来证明自己）
• 自己查阅之前开发的功能时，需要 run 起来项目

不依赖线上接口数据好处：

• 【更灵活的假数据】，可用于开发时，提前渲染还没有的接口
• 【前后端分离并行开发】，可以对照后端1比1写好一个json文件
• 【很久的项目也能跑起来】，项目不管多久后，单机都能跑起来，方便自己找之前的方法和功能

开始配置 Charles URL 映射

• 我这里汇总了一下，一步到位的解决证书、跨越、映射，一条龙配置好映射接口，并返回数据
  借鉴了的文章：Charles的URL映射和请求拦截、charles解决跨域问题、解决Charles 关于跨域、解决Access-Control-Allow-Origin:*、Charles安装证书

作者的版本（查阅自己的版本，如果太老或者太新的，自行对应功能按键）

image.png

配置步骤

配置映射 Map Remote 或 Map Local

可以映射到本地 Map Local 或 映射远程地址URL Map Remote

• 配置 Map Remote 映射到自己的本地地址或域名 eg: 127.0.0.1 || myself.domain.host

打开：Tools -> Map Remote Settings

Map Remote Settings.png

Edit.png

• 配置 Map Remote 时，自己写的单入口文件处理返回指定的 json，脚本：

' . $fileName);

// Require
@$json = include('./'. $fileName);
if (!$json) {
    $json = include('./500.json');
}
!DEBUG ?: var_dump('$json ->' . $json);

return json_encode($json);

?>

• 配置 Map Local 映射到本地 json

打开：Tools -> Map Local Settings

Map Local Settings.png

Edit Mapping.png

去创建一个 json ，文件内容如下，目的就是如上图 Map To 要映射的数据 json

json.png

• 配置跨域请求（不是映射的https不需要配置）

如果是映射像我上面https接口地址的话就会有跨域问题浏览器同源策略
打开：Tools -> Rewrite Settings

Rewrite Settings.png

Access-Control-Allow-Origin:http://localhost:8083
Access-Control-Allow-Methods:GET,POST,OPTIONS,PUT
Access-Control-Allow-Headers:Accept,Origin,X-Requested-With,Content-Type,Last-Modified
Allow:GET,HEAD,POST,PUT,DELETE,TRACE,OPTIONS,PATCH
404->200 // 特殊选择：Rewrite Rule 的 Type 选择 Response Status
Access-Control-Allow-Credentials:true

Rewrite Rule.png

• 大功告成，验证一下！

然后正常项目请求接口，打印 res 查看一下就能看到之前定义的 json 文件里的数据

res.png

扩展内容 - 配置证书

• 安装证书（只是针对 https 域名 443，因为 443 是加密的，http 不需要）

如果不安装和不信任证书443安全域名会加锁，会映射不到接口
打开：Help -> SSL Proxying -> Install Charles Root Certificate

image.png

image.png

• 配置代理设置

需要注意的是，配置*时，所有网页接口都会被拦截包括百度等，以及你正在使用的浏览器上的所有页面
打开：Proxy -> SSL Proxying Settings

配置代理设置.png

遇到的问题

• 软件权限问题 (请确保 Charles 在可读写的卷上运行)

Charles cannot configure your proxy settings while it is on a read-only volume. Perhaps you are running Charles from the disk image? If so, please copy Charles to the Applications folder and run it again. Otherwise please ensure that Charles is running on a volume that is read-write and try again.

：配置上面说Rewrite Settings跨域问题
搬运：CSDN后端学长

sudo chown -R root "/Applications/Charles.app/Contents/Resources"
sudo chmod -R u+s "/Applications/Charles.app/Contents/Resources"

• 跨域问题 Access-Control-Allow-Origin

Access-Control-Allow-Origin.png

Access to XMLHttpRequest at 'https://api.huoban.com/v2/ticket/parse' from origin 'http://localhost:8083' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

：配置上面说Rewrite Settings跨域问题
Access-Control-Allow-Origin:http://localhost:8083

Access-Control-Allow-Origin.png

• 跨域问题 Access-Control-Allow-Credentials

Access-Control-Allow-Credentials.png

Access to XMLHttpRequest at 'https://api.xxxxxx.com/v2/ticket/parse' from origin 'http://localhost:8083' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

：配置上面说Rewrite Settings跨域问题
Access-Control-Allow-Credentials:true

Rewrite Settings.png