网站首页 > 技术文章 正文
网站从http升级为https
过程记录
https网站解决block:mixed-content问题
- 问题定位:前端升级为https,前端发出请求链接也应升级为https。不然会报出block:mixed-content。
- 解决问题:
- 简单解决方法:把后端的链接都改为https;
- 页面的head中加入:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
功能是自动将http的不安全请求升级为https
https网站请求出错:NET::ERR_CERT_COMMON_NAME_INVALID
前端第一次调用跨越的https的不同链接,遇到不安全的证书的时候,就会报这个错误。
https证书需要绑定域名。
通过修改Hosts链接地址参数信息,还是会报上面跨越的错误。
解决的思路。
申请正式版免费的证书。
- 可以通过https://www.qiniu.com/ 七牛云来进行免费证书的申请。
- 不过免费的都有限制,三个月或是一年。
- 证书会与域名进行绑定,还需要申请一个域名。
- 如果部署到外网上,还需要一个外网的IP,然后域名与证书进行绑定。
- 如果部署到内网,还需要部署一个dns服务器,然后域名与IP进行绑定,后域名与证书再进行绑定。
- 总结
- 整体的过程配置复杂,要申请一个证书,正式的证书是每年收费,免费版还是有时间限制。
让客户点选一次,反向代理。
架构上前后端分离,如果每一个域名每一个端口需申请一个证书,那后续的证书就比较多了。
所以选择一个证书,建立一个网站,后面通过反向代理来链接,就称为一个比较好的思路。
如果证书合法,就可以直接访问,如果证书不合法,前端用户也只点击一次。
推荐的方法--通过nginx来实现https(查看前端网站的部署)
配置整体的思路
因前端需要升级https,前端发起的链接也需要升级https。
- 通过反向代理,前端只是需要配置一个https的空壳。申请一个证书,申请一个端口就可以了。
- 配置对应的代理链接,代理到前端对应的http的地址信息。
- 配置对应的代理链接,代理到后端对应的http的地址信息。
- 配置对应的代理链接,代理到地图对应的http的地址信息。
在nginx的配置信息
server { listen 443 ssl; server_name localhost; ssl_certificate c://nginx//ssl//buduhuisi.crt; ssl_certificate_key c://nginx//ssl//buduhuisi.key; ? ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ? ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; ? location /arcgis { proxy_pass http://192.168.1.35:6080; } ? location / { # root html; # index index.html index.htm; root D:/code_web/cyy_yujing_pages; index index.html index.htm; } }
- 注意:通过location / 配置上前端对应的页面信息(也可以配置到另外一台机子,不过在实践中,跳转到其他机子会比较慢,所以优先配置在本环境目录下),
- 注意:通过location /arcgis 为arcgis的地图服务信息。
- 注意:通过location /为前端的默认地址信息。
- 注意: 通过loation /gis 或是/common 等来配置后端的服务信息。
附件中已有配置好ssl的nginx的包信息
- 下载下来,然后修改下配置就行。
- 上一篇: 图解正向代理、反向代理以及透明代理
- 下一篇: Vue2 项目开启本地开发代理服务器,解决跨域问题
猜你喜欢
- 2025-06-13 Linux 上利用Nginx代理uWSGI处理Flask web应用
- 2025-06-13 如何隐藏代理器服务地址?企业级IP匿名化与反追踪技术
- 2025-06-13 宝塔面板使用Nginx反向代理解决跨域问题
- 2025-06-13 海尔集团武汉中心总经理孙梁君——以智慧家电 升级品质生活
- 2025-06-13 给小白的 Nginx 10分钟入门指南(nginx入门教程)
- 2025-06-13 反向代理以及其使用场景(反向代理啥意思)
- 2025-06-13 Vue炼金术:解锁前端开发的进阶之道
- 2025-06-13 93.8k Star 的内网穿透神器 frp:DIY开发者必备的反向代理
- 2025-06-13 Nginx正向代理、反向代理、负载均衡及性能优化
- 2025-06-13 深入理解跨域及常见误区揭秘(深入理解跨域及常见误区揭秘论文)
你 发表评论:
欢迎- 522℃Oracle分析函数之Lag和Lead()使用
- 519℃几个Oracle空值处理函数 oracle处理null值的函数
- 517℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 504℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 501℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 493℃【数据统计分析】详解Oracle分组函数之CUBE
- 472℃Oracle有哪些常见的函数? oracle中常用的函数
- 471℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端富文本编辑器 (47)
- 前端路由 (61)
- 前端数组 (73)
- 前端排序 (47)
- 前端定时器 (47)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
- 前端登录页面 (48)
本文暂时没有评论,来添加一个吧(●'◡'●)