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

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跨协议问题)