问题描述:Charles 本地代理(Map local)接口数据,发现接口单独访问能成功,但是域名网址访问接口显示跨域
Charles 本地代理(Map local)接口数据,
发现接口单独访问能成功,但是域名网址访问接口显示跨域,具体报错如下:
各项代理配置都正确,charles 抓包显示返回结果都没问题
就是在浏览器里面访问的时候显示跨域错误没有返回数据!为什么呢?
经过多方对比成功的请求和代理的请求各项参数,发现跨域是因为相应头部里面缺少允许跨域参数引起的!
代理后失败的响应头:
没代理的时候成功的响应头:
有两个参数很重要,这是解决接口跨域的关键:
-
access-control-allow-credentials: true
-
access-control-allow-origin: http://yao.yiyaojd.com:3100
(这里多说两句跨域的解决办法:一般跨域 最常用的有两种解决办法,一种是jsonp,另一种是CORS(Cross-Origin-Resource-Sharing),也就是需要设置withCredentials:ture,这里我的接口是post 请求,所以jsonp不适合我,也不可能为了代理去改变我的接口请求方式)
那么如何在代理的时候加上我想要的响应头,目标明确了之后就可以操作Charles行动了。
一、Tools 里面有个rewrite的功能,可以帮助我们修改请求信息
二、点击进入,点击1允许重写,点击2新建一个规则
三、点击3的add ,把想要代理的接口填写进去(我看很多文章写的是*,我自己试了下,发现* 会对所有的接口产生影响,导致其他接口也没办法返回正确的数据,所以弃用了*,写具体的接口名称)
四、点击4,添加我们刚刚说的那两个响应头:
-
access-control-allow-credentials: true
-
access-control-allow-origin: http://yao.yiyaojd.com:3100
ok, 全部添加完成就是这个样子了:
再次请求页面,成功!不报跨域错误了!