初学前端，接口联调过程时，想像客户端app一样，能利用代理直接将接口代理，使用MapLocal将本地文件设置为接口Response结果，这样本地联调页面比较灵活，准备好本地文件，Charles开启Mac OX Proxy和配置MapLocal后，本地启动web工程，但由于是localhost地址，请求服务时会遇到跨域问题，chrome dev tools控制台报错：
Access to fetch at 'https://*********/config?id=9' from origin 'https://*******' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
意思是跨域了，需要配置'Access-Control-Allow-Origin' header。设置方式：
Charles - Tools - Rewrite 中
1.选中【Enable Rewrite】
2.点击Add，起个名字，比如叫「LocalCros」
2.Add Rewrite.png
3.点击3处的Add，将需要代理接口的host填进去，端口post一般是http填80，https填443，然后点击OK
3.Add Host.png
4.填写跨域配置，点击4处的Add，Type选Add Header，下面的值Name填：「Access-Control-Allow-Origin」，值Value填「*」，选中「Replace All」点击OK保存。注意where选项，选Response。
4. Add Cros Config
现在试试：是的，你没看错，还有问题。莫慌，再往下看：
NoProblem.png
image.png
去看下控制台的错误，可能提示你 不能用*，怎么办，修改这个4的配置，改成你自己的host地址。
上一步4中的Name-Vaule对这样添加：
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:r-url,ticket,Cookie,DNT,Custom-Header,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Disposition,x-real-ip,x-real-ipv6,x-forwarded-for,X-Auto-Driver-Token,X-Auto-SP-Token,X-Auto-ChannelId,X-Image-Accept-WebP,X-OmgId,X-Custom-Header
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin：http://127.0.0.1:8081（你工程本地run后的访问地址）
配置完是这样的：
image.png
然后，就可以愉快地任意mock数据了。
网友评论