ICode9

精准搜索请尝试: 精确搜索
首页 > 系统相关> 文章详细

前后端分离+nginx实现动静分离搭建https图解

2022-03-28 00:02:47  阅读:160  来源: 互联网

标签:前端 分离 端口 nginx https 服务器 页面


一、前后端不分离:

项目运行在同一个域名以及端口下,通过controller调转到springboot中resources的static下的页面从而实现交互;
在这里插入图片描述

二、前后端分离:

前端页面发送ajax请求给目的服务器,目的服务器会响应json数据{code: 400, Message: 需要登录! data:{}}给前端,前端根据响应码进行相应的页面跳转,然后也可以将获取到的数据展示在页面上;
在这里插入图片描述

三、nginx搭建https服务

3.1 第一步实现利用https协议访问原先的http接口

nginx端口监听443:proxy_pass http://127.0.0.1:8080;
在这里插入图片描述

3.2 第二步将前端界面整合到nginx中

nginx监听443端口,设置location映射;

location /static {
         alias   D:/web;
         autoindex on;
}

下图总体解释:用户访问https://front.smile.com/login.html实则是通过nginx去访问静态资源,页面完成后发送ajax请求给目的服务器实则是通过nginx反向代理去帮助我们寻找目的服务器,nginx返回json数据,前端页面根据响应数据进行页面跳转;

在这里插入图片描述

四、总结

本文主要通过图解去描述,任何技术先去理解再去复现哈。


 

少年的志向,不应该是房子,他们应该伏案疾书,或为心中的梦想而挥洒汗水,畅想着自己未来光明的人生,少年的梦想,也不应该是生活,他们应该想要集齐七颗龙珠,或者幻想着拥有一颗皮卡丘。欢迎关注微信公众号<彭晓琪>,Java学习交流qq群(百人群):608827101

标签:前端,分离,端口,nginx,https,服务器,页面
来源: https://www.cnblogs.com/java-pxq/p/16065256.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有