跨域代理解决方案

2,547 阅读2分钟

一. 什么是跨域:

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,可以看到各种请求了,界面是这样的;
Charles 主要提供两种查看封包的视图,分别名为 “Structure” 和 “Sequence”。 Structure 视图将网络请求按访问的域名分类。Sequence 视图将网络请求按访问的时间排序。

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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。