使用Charles实现本地数据mock跨域问题

本文转载于https://blog.csdn.net/weixin_36985768/article/details/90047887，更加详细
1）安装charles和注册
charles下载：https://www.charlesproxy.com/latest-release/download.do
一直下一步下一步进行安装。

注册账号（不注册的话，30天会过期，每30s会关闭一次）

Registered Name:https://zhile.io

License Key: 48891cf209c6d32bf4

2）配置接口
a. 创建一个json文件，命名为TodoList（名字可自行更改）
TodoList.json

{
	"data": [1, 2, 3]
}

b. 打开charles，点击 Tools -> Map Local ...，勾选Enable Map Local，点击Add按钮，按下图填写，其中Local Path选择刚才创建好的json文件。

出错点：

Host选项如果只写localhost，会出现浏览器访问时出现404，经过查看发现charles能抓取线上的包，但是不能抓取本地的包，那么把我们想要访问的接口挂到localhost.charlesproxy.com:3000域名下，就能访问了。
c. 修改TodoList.js文件代码的访问地址

...
componentDidMount() {
		axios.get('http://localhost.charlesproxy.com:3000/api/todolist')
			.then(() => {
				alert('succ')
			})
			.catch(() => {
				alert('error')
			});
	}
...

出错点：

      虽然ajax访问接口能正常的获取到数据，并成功得到202，但是返回结果仍为error，查看以下错误Access to XMLHttpRequest at 'http://localhost.charlesproxy.com:3000/api/todolist' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.，发现出现跨域问题。

charles如何配置跨域？
查看跨域资源共享 CORS 详解 https://blog.csdn.net/xxm0720/article/details/79795715
介绍：OPTIONS请求是非简单请求的一种处理方式。在真正发送请求之前，增加一次HTTP查询请求，称为"预检"请求（preflight），就是我们刚刚说到的参数为OPTIONS的第一次请求，它的作用是：询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP请求和头信息字段。只有得到肯定答复，浏览器才会发出正式的HttpRequest（GET、POST等）第二次请求；否则就报错，也不会进行第二次请求。
解决方法：使用charles的rewrite修改options请求的response header
a. 点击Tools --> Rewrite；
b. 添加rewrite配置

c. 修改header
修改四个字段，具体字段内容如下：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS
Access-Control-Allow-Headers: Accept,Origin,X-Requested-With,Content-Type,Last-Modified
Allow: GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH

d. 修改status code

e. 重新查看页面，可以发现能够成功返回”succ"。

3）动态加载数据显示到页面
加载获取到数据后，修改state数据，达到动态修改数据。查看页面，能够进行正常的增删操作。
TodoList.js（添加新内容）

...
import axios from 'axios';
...
	componentDidMount() {
		axios.get('http://localhost.charlesproxy.com:3000/api/todolist')
			.then((res) => {
				console.log(res.data);
				this.setState(() => ({
					list: [...res.data]
				}));
			})
			.catch((e) => {
				console.log(e);
			});
	}
...