Web:前后端http/https跨协议互相访问调用问题——使用nginx代理(好文章!!)
1.问题搭建内部中台时遇到了一个很尴尬的问题:搭建前端使用的vue,然后产出静态文件,用nginx代理到http的地址;搭建后端使用的flask-restful,直接python运行,运行在http的地址;(另外吐槽下,flask-restful真心好用,但是目前资料真的太少,flask的资料多,但是作为初学者,还看不懂TAT)内部地址找运维大大申请了,最终运行在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; # 这是后端端口,注意这里网址的格式没有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
更多推荐
所有评论(0)