使用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，脚本：
<?php
// Set Header (设置后前端无需转义直接获取 json 格式的数据)
header("Content-Type:application/json");
const DEBUG = false;
// Get Entry File Name (/index.php)
!DEBUG ?: var_dump($_SERVER['SCRIPT_NAME']);
// Get REQUEST_UR (获取请求路径 /index.phpv2/user/info)
!DEBUG ?: var_dump($_SERVER['REQUEST_URI']);
// Remove SCRIPT_NAME
!DEBUG ?: var_dump(str_replace($_SERVER['SCRIPT_NAME'], '', $_SERVER['REQUEST_URI']));
$fileName = str_replace($_SERVER['SCRIPT_NAME'], '', $_SERVER['REQUEST_URI']) . '.json';
// Replace "/" to ":" (这样才能找到带'/'的字符串文件名)
$fileName = str_replace('/', ':', $fileName);
!DEBUG ?: var_dump('fileName ->' . $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
