• 前端开发调试之代理配置


    前端开发往往需要在本地调试环境和线上环境之间灵活切换,以将要调试的一个页面为例,页面引用了如下的静态资源,要想在本地开发调试下面引入的js代码,最直接的方法是在把引入的资源路径改成本地调试路径,并起一个本地服务器访问页面,使用这种方法最大的缺点就是上线前需要恢复原来的引入路径,再或者我们没有权限修改页面代码,上述方法也无法使用。因此代理的方式才是首选。

    <script type="text/javascript" src="//q.qunarzz.com/flight_tejia/prd/scripts/app.js"></script>
    

    Mac上常用两种代理工具:Nginx和Charles,下面介绍这两种工具的配置方法。

    配置Nginx代理

    第一步:配置host使请求打到本地

    127.0.0.1 q.qunarzz.com
    

    为了方便配置host,推荐使用SwitchHosts软件



    第二步:配置nginx
    nginx基本命令

    sudo nginx #第一次启动nginx
    sudo nginx -s reload #重新启动nginx
    sudo nginx -s stop  #关闭nginx
    

    以支持https请求为例,浏览器或者模拟器访问页面https://q.qunarzz.com:443/xxxxx,域名解析host生效—>127.0.0.1:443/xxxx,使用nginx的proxy_pass代理到本地端口如3000因此会将请求打到本地服务,对于的nginx配置如下,对于https需要安装证书文件,可以参考如何为nginx配置https(免费证书)

    server{
        listen  80;
        listen  443 ssl;
        #监听的域名
        server_name qunarzz.com q.qunarzz.com my.qunar.com mobileqzz.beta.qunar.com;
        expires -1;
    ​
        ssl_certificate      /usr/local/etc/nginx/cert/xxx.crt;
        ssl_certificate_key  /usr/local/etc/nginx/cert/xxxx.key;
    ​
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
    ​
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;
    ​
        location ~ /(flight_tejia)/ {
            proxy_pass http://127.0.0.1:8000;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP        $remote_addr;
            proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
        }
    }
    

    配置Charles代理

    个人喜欢使用Charles代理,图形化的界面便于发现代理错误和集中管理常用代理,上面的代理也可以使用Charles配置,而且不需要单独配置host。
    第一步:开启Charles的SSL proxy
    开启Charles,点击顶部菜单栏的Proxy--SSL Proxying Settings,打开设置页面。点击add按钮,可以对制定的Host和Port进行SSL Proxy,如果想对所有的Host进行SSL代理,在Host输入框里填*,在Port框里填443,这样可以代理所有域名或ip。最后点击Enable SSL Proxying,生效设置。



    第二步:终端连代理,安装Charles的证书
    保证终端和电脑在同一个局域网内,比如手机和电脑都连同一个热点,或者电脑开共享热点,手机连这个热点。模拟器就不需要了。在手机的WLAN设置里,选择热点-修改网络或者高级设置-代理-手动,输入电脑的局域网IP,端口号是8888。这个8888是Charles的默认端口号。连接成功后,在手机浏览器里输入http://charlesproxy.com/getssl,点回车。会自动下载弹窗提示安装charles的ssl证书,安装即可。



    补充说明在手机或者模拟器上要设置信任证书,设置->通用->关于手机-> 证书信任设置
    第三步:通过Map Remote实现https转http
    手机连上Charles的代理,发送网络请求。第一次连Charles发请求时,Charles会弹窗提示是否允许该终端发网络请求,一定要点是!。可以看到即使是https,也可以明文展示。以q.qunarzz.com为例,找到q.qunarzz.com的请求项,右击,点击Map Remote, 将https://q.qunarzz.com 映射到 http://q.qunar.com,重新发请求即可。

    最后还有一点需要注意,由于浏览器的安全策略,如果使用浏览器打开,可能会有如下错误,只需要继续前往,然后刷新页面就好了。
    d8a2ac3b-f2b3-4e37-82aa-a4537ecf3db0

  • 相关阅读:
    1877. 数组中最大数对和的最小值 力扣(中等) 简单题,sort+贪心
    1838. 最高频元素的频数 力扣(中等) 尺取法 是我做不出来的题
    面试题 08.09. 括号 力扣(中等) 是我想不出来的回溯
    js删除数组里的某个元素
    Yiwen with Sqc 题解(dp)
    Link with EQ 题解(dp)
    Robots 题解(暴力bitset)
    P3232 [HNOI2013]游走 题解(图上随机游走问题 高斯消元
    怀旧游戏 题解(逆向bfs打表博弈)
    F. The Number of Subpermutations 题解(异或hash维护全排列)
  • 原文地址:https://www.cnblogs.com/star91/p/qian-duan-kai-fa-diao-shi-zhi-dai-li-pei-zhi.html
Copyright © 2020-2023  润新知