Web：前后端http/https跨协议互相访问调用问题——使用nginx代理（好文章！！）

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; # 这是后端端口，注意这里网址的格式没有uri，千万别写错了！！例如：http://xxx/HouDuanDuanKou/abc则访问结果为：http://xxx:5000/HouDuanDuanKou/abc
            # 如：你的后端是http://127.0.0.1:5000/api，location这里和proxy_pass都改下就行了
        }
    }

proxy_pass的格式千万别写错了，有无uri完全不同，详解可参考：https://www.jianshu.com/p/b010c9302cd0

 

感慨下，欠的债终究要补啊。不懂的东西太多，没系统学习过注定在日后踩坑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

转载自：https://www.jianshu.com/p/c564a775c217