初学前端,接口联调过程时,想像客户端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」
3.点击3处的Add,将需要代理接口的host填进去,端口post一般是http填80,https填443,然后点击OK
4.填写跨域配置,点击4处的Add,Type选Add Header,下面的值Name填:「Access-Control-Allow-Origin」,值Value填「*」,选中「Replace All」点击OK保存。注意where选项,选Response。
现在试试:是的,你没看错,还有问题。莫慌,再往下看:
去看下控制台的错误,可能提示你 不能用*,怎么办,修改这个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后的访问地址)
配置完是这样的:
然后,就可以愉快地任意mock数据了。