一. 什么是跨域:
URL 说明 是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名,不同文件或路径 允许
http://www.domain.com/lab/c.js
http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名,不同端口 不允许
http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名,不同协议 不允许
http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许
http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同,子域不同 不允许
http://domain.com/c.js
http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名 不允许复制代码
二. 解决方案:
网上解决方案有很多,大家跨域自行百度,比如:nginx代理,webpack代理,服务端配置“Access-Control-Allow-Origin”头,通过jsonp跨域等等,这里介绍的是使用软件解决跨域的方案。
1. Moesif Orign & CORS Changer :一款解决跨域的chrome插件,安装使用步骤:
- 在chrome上安装“谷歌访问助手” 或者 vpn 都可以,只要能访问谷歌应用商店就可以,方法请自行百度;
- 在谷歌应用商店搜索“Moesif Orign & CORS Changer”插件安装;
- 安装完成后,chrome浏览器右上角会出现插件提示,需要跨域的时候,打开就ok了;
- 再次打开调试工具,就会发现跨域问题消失了;
2. charles: 一款很实用,界面很友好,功能强大的抓包神器,此处只介绍win10中的代理(同款软件Fiddler):
- 下载win10版的charles:www.charlesproxy.com/documentati…
- 默认情况下,charles是抓不到本地的包,比如localhost:8080,需要修改firfox代理设置,把不使用代理里面清空,默认应该是localhost,127.0.0.1是不使用代理,(此项):
- 打开charles,可以看到各种请求了,界面是这样的;
Structure 视图:
Sequence 视图:
- 在Structure视图找到想代理的网址,右键→“Map Remote”, 按照提示设置协议,网址,端口,再次刷新127.0.0.1:8080,你会发现变成百度的网址了;
备注:
为什么charles不在chrome上用?
charles默认是抓不到chrome和firfox的本地包,比如localhost:8080之类的,网上说可以在chrome和firfox中设置代理,firfox的代理找到了,chrome中始终找不到,可能我的打开方式不对吧,所有就只介绍firfox咯,如果有童鞋知道chrome怎么设置,请在下方留言告诉我,万分感谢!
作者:Wang-Yang
链接:https://juejin.cn/post/6844903800394743821
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。