charles 本地代理(map local)接口数据产生的跨域问题解决办法

时间:2024-03-13 14:30:32

问题描述:Charles 本地代理(Map local)接口数据,发现接口单独访问能成功,但是域名网址访问接口显示跨域

Charles 本地代理(Map local)接口数据,

charles 本地代理(map local)接口数据产生的跨域问题解决办法

发现接口单独访问能成功,但是域名网址访问接口显示跨域,具体报错如下:

charles 本地代理(map local)接口数据产生的跨域问题解决办法

各项代理配置都正确,charles 抓包显示返回结果都没问题

charles 本地代理(map local)接口数据产生的跨域问题解决办法

 就是在浏览器里面访问的时候显示跨域错误没有返回数据!为什么呢?

经过多方对比成功的请求和代理的请求各项参数,发现跨域是因为相应头部里面缺少允许跨域参数引起的!

代理后失败的响应头:

charles 本地代理(map local)接口数据产生的跨域问题解决办法

没代理的时候成功的响应头:

charles 本地代理(map local)接口数据产生的跨域问题解决办法

 有两个参数很重要,这是解决接口跨域的关键:

  1. access-control-allow-credentials: true

  2. access-control-allow-origin: http://yao.yiyaojd.com:3100

(这里多说两句跨域的解决办法:一般跨域 最常用的有两种解决办法,一种是jsonp,另一种是CORS(Cross-Origin-Resource-Sharing),也就是需要设置withCredentials:ture,这里我的接口是post 请求,所以jsonp不适合我,也不可能为了代理去改变我的接口请求方式)

那么如何在代理的时候加上我想要的响应头,目标明确了之后就可以操作Charles行动了。

一、Tools 里面有个rewrite的功能,可以帮助我们修改请求信息

charles 本地代理(map local)接口数据产生的跨域问题解决办法

二、点击进入,点击1允许重写,点击2新建一个规则charles 本地代理(map local)接口数据产生的跨域问题解决办法

三、点击3的add ,把想要代理的接口填写进去(我看很多文章写的是*,我自己试了下,发现* 会对所有的接口产生影响,导致其他接口也没办法返回正确的数据,所以弃用了*,写具体的接口名称)

charles 本地代理(map local)接口数据产生的跨域问题解决办法

四、点击4,添加我们刚刚说的那两个响应头:

  1. access-control-allow-credentials: true

  2. access-control-allow-origin: http://yao.yiyaojd.com:3100

charles 本地代理(map local)接口数据产生的跨域问题解决办法

charles 本地代理(map local)接口数据产生的跨域问题解决办法

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

charles 本地代理(map local)接口数据产生的跨域问题解决办法

再次请求页面,成功!不报跨域错误了!