欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-01 21:53:10
问题描述:Charles 本地代理(Map local)接口数据,发现接口单独访问能成功,但是域名网址访问接口显示跨域Charles 本地代理(Map local)接口数据,发现接口单独访问能成功,但是域名网址访问接口显示跨域,具体报错如下:各项代理配置都正确,charles 抓包显示返回结果都没问题就是在浏览器里面访问的时候显示跨域错误没有返回数据!为什么呢?经过多方对比成功的请求和代理的请求各项参数,发现跨域是因为相应头部里面缺少允许跨域参数引起的!代理后失败的响应....

问题描述: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)接口数据产生的跨域问题解决办法

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

本文地址:https://blog.csdn.net/poppymilan/article/details/107468230

相关标签: 工具

上一篇:

下一篇: