使用Charles mock数据当遇到跨域的问题怎么办？

先说下什么是跨域？
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。

然后我是怎么发现遇到跨域的问题， 我说一下
在mock一个地址的时候， F12有报错信息，如下

这个报错 在网上百度， 说是跨域的问题，出现这个问题的呈现方式什么呢？
各项代理配置都正确，charles 抓包显示返回结果都没问题
答案是 我们mock的接口返回是没问题的， 但是前端是不展示内容的， 就是为空展示，在f12中查看也是接口返回为空的 见图

本身是有数据， 我们只改里面的name或者是其他的字段，改完之后， 会展示我们本地mock的内容，但是显示为空的， 就是跨域的问题
说了怎么多，大家也知道啥情况，
接下来说一下
我们怎么解决跨域的问题呢？
首先是去百度， 哈哈， 百度是个好东西， 别的博主提供了很多种方案， 最后我们是这样实现的
1、Tools 里面有个rewrite的功能，可以帮助我们修改请求信息
2、点击进入，点击1允许重写，点击2新建一个规则

3、点击3的add ，把想要代理的接口填写进去
你拿到接口往host里面一放，点OK就行， 在进去看的时候会自动给你对应好的

4、点击4，添加我们刚刚说的那几个响应头：

我自己添加如下：





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

ok, 全部添加完成就是这个样子了：

点击OK完成就可以试试啦！！！