百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

前端网站-https-部署 早动员早部署抓前端抓关键

bigegpt 2024-10-06 02:42 6 浏览

网站从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的包信息

  • 下载下来,然后修改下配置就行。

相关推荐

5分钟调色大片的方法(5分钟调色大片的方法有哪些)

哈喽大家好。在大家印象中一定觉得ps非常难学非常难。大家不要着急,小编的教学都是针对ps零基础的同学的,而且非常实用哦。只要大家跟着图文练习一两遍,保证大家立马学会~!好了,废话少说,下面开始我们今天...

闪白特效原来是这么用的(闪白特效怎么使用)

作者|高艳侠订阅|010-86092062闪白特效是影视作品中应用比较多的效果之一,那么具体该在哪些场景使用闪白特效?具体该如何操作?下面就以AdobePremiere(以下简称PR)为例,...

ppt常用小图标去哪里找?3个矢量素材网站推荐!

ppt是一个注重可视化表达的演示载体,除了高清图片,ppt中另一类常用的素材是各种小图标,也叫矢量图标,巧妙运用小图标能提升整体美观度和表现力,那么ppt常用小图标去哪里找呢?为方便各位快速找到合适的...

有什么好用的截图录屏工具?试试这9款

经常有朋友反馈苦于缺乏截屏和录屏的趁手工具,本期我们分享几个相当好用的截屏和录屏工具,希望能帮到大家。ScreenToGifScreenToGif是一款免费且开源的录屏工具。此款工具最大的特点是可以...

配色苦手福音!专业快速色环配色PS插件

今天橘子老师给的大家介绍的是一款快速配色的插件,非常强大配色苦手福音来啦!(获取方式见文末)【插件介绍】配色在后期设计中占有主导地位,好的配色能让作品更加抢眼Coolorus这款专业的配色插件,能够...

如何用PS抠主体?(ps怎么抠主体)

1.主体法抠图-抠花苞和花梗导入一张荷花苞的照片,点击上图中顶部“选择”菜单栏,下拉单击“主体”。可以看到,只有花苞被选中,但是花梗并没有被选中。接下来单击上图中左侧工具栏的“快速选择工具”,上图中顶...

2799元的4K电视,有保障吗?(买4k电视机哪个品牌好)

在上一期《电脑报》的3·15专题报道中,我们揭露了一款不靠谱的42英寸4K智能电视——TCLD42A561U。这款售价2699元的4K智能电视不仅4K画质方面存在严重问题,而且各种功能和应用体验也不理...

苹果电脑的Touch Bar推出一段时间了 这款工具可以帮你开发适用于它的APP

距离苹果推出带有TouchBar的MacBookPro已经有一段时间了,除了那些像Adobe、Google和Microsoft大公司在开发适用于TouchBar的应用之外,其实还有很多独立的开...

如魔法般吸取颜色的桌灯(如魔法般吸取颜色的桌灯叫什么)

色彩为生活带来的感官刺激,逐渐被视为理所当然。一盏桌灯运用它的神奇力量,将隐藏于物件中的颜色逐一释放,成为装点环境的空间魔法师。ColorUp是一款可以改变颜色的吸色台灯,沿用传统灯泡的造型,融入了拾...

一篇文章带你用jquery mobile设计颜色拾取器

【一、项目背景】现实生活中,我们经常会遇到配色的问题,这个时候去百度一下RGB表。而RGB表只提供相对于的颜色的RGB值而没有可以验证的模块。我们可以通过jquerymobile去设计颜色的拾取器...

ps拾色器快捷键是什么?(ps2019拾色器快捷键)

ps拾色器快捷键是什么?文章末尾有获取方式,按照以下步骤就能自动获得!学会制作PS特效需要一定程度的耐心和毅力。初学者可以从基本的工具和技术开始学习,逐渐提高他们的技能水平。同时,观看更多优秀的特效作...

免费开源的 Windows 截图录屏工具,支持 OCR 识别和滚动截图等

功能很强大、安装很小巧的免费截图、录屏工具,提供很多使用的工具来帮我么能解决问题,推荐给大家。关于ShareXShareX是一款免费的windows工具,起初是一个小巧的截图工具,经过多年的迭...

入门到精通系列PS教程:第13篇 · 拾色器、颜色问题说明及补充

入门到精通系列PS教程:第13篇·拾色器、颜色问题说明及补充作者|侯潇问题说明我的第12篇教程里,有个小问题没有说清楚。要说是错误,又不算是错误,只是没有说准确。写完那篇教程后,因为已经到了深...

PS冷知识:用吸管工具吸取屏幕上的任意颜色

今天,我们给大家介绍PS中的一个冷知识:用吸管工具可以吸取屏幕上的任意颜色。其实,操作起来是非常简单的。大多数情况下,我们认为,PS的吸管工具只能吸取PS软件作图区域范围内的颜色,最多加上画布四周的...

Windows 11 将提供内置颜色选择器工具

Windows11内置了颜色选择器,可以扫描并识别屏幕上的颜色并生成颜色代码。此外,微软还利用人工智能技术,让屏幕上的文本扫描和选择变得更加便捷。这两项功能均已在SnippingToolv1...