美文网首页
Web:前后端http/https跨协议问题

Web:前后端http/https跨协议问题

作者: LightingContour | 来源:发表于2020-02-26 16:28 被阅读0次

    1.问题

    搭建内部中台时遇到了一个很尴尬的问题:
    搭建前端使用的vue,然后产出静态文件,用nginx代理到http的地址;
    搭建后端使用的flask-restful,直接python运行,运行在http的地址;(另外吐槽下,flask-restful真心好用,但是目前资料真的太少,flask的资料多,但是作为初学者,还看不懂TAT)
    内部地址找运维大大申请了,最终运行在https的地址;
    问题出现了:前端使用http地址直接访问时没有问题,但是使用https访问时,请求后端是用ajax请求的http地址,报错

    Mixed Content: The page at '[https://XXX)' was loaded over HTTPS, 
    but requested an insecure XMLHttpRequest endpoint
    '[http://XXX](http://XXX)'. This request has been blocked; 
    the content must be served over HTTPS.
    

    2.解决

    查网上的方案主要是,将后端改造,也支持https/后端通过nginx代理成http。作为新手已经看懵了,因为还得自己配置下https证书。这些解决方案我贴到下面

    但是问运维大大,找到了另外一个方案:把后端也用nginx反向代理到同一个接口,ajax请求就可以用https的啦。运维大大牛逼!
    这里贴一下nginx的代理配置,希望可以帮助到其他同学~

    server {
            listen       80 default_server;
            listen       [::]:80 default_server;
            server_name  _;
            root         /home/data/ZheShiQianDuan; # 前端资源
    
            # Load configuration files for the default server block.
            include /etc/nginx/default.d/*.conf;
    
            location / {
            }
    
            location /HouDuanDuanKou {
                proxy_pass http://xxx:5000/HouDuanDuanKou; # 这是后端端口
                # 如:你的后端是http://127.0.0.1:5000/api,location这里和proxy_pass都改下就行了
            }
        }
    

    感慨下,欠的债终究要补啊。不懂的东西太多,没系统学习过注定在日后踩坑TAT

    Links

    1.Nginx直接反向代理后端:https://blog.csdn.net/qq_37105358/article/details/80854559
    2.Flask直接走https:
    https://blog.miguelgrinberg.com/post/running-your-flask-application-over-https
    3.阮一峰的SSL/TSL协议概述:
    https://www.ruanyifeng.com/blog/2014/02/ssl_tls.html

    相关文章

      网友评论

          本文标题:Web:前后端http/https跨协议问题

          本文链接:https://www.haomeiwen.com/subject/bydbchtx.html