前后端问题排查方案模板，前后端问题排查方案模板下载

前后端交互防密码抓包(前后端加解密)

1、前后端交互数据加解密方案：将对称加密的密钥使用非对称加密的公钥进行加密，然后发送出去，接收方使用私钥进行解密得到对称加密的密钥，然后双方可以使用对称加密来进行沟通。使用服务端持有的私钥解密第4步获取到的RSA加密byte。从而获取到了第二步时候的数据，同时需要base64解码data数据。

2、RSA+AES混合加密，即后端通过RSA算法生成一对公私钥，并把公钥提供给前端。前端通过AES算法生成密钥，利用公钥进行加密并送给后端，后端根据私钥进行解密，得到与前端相同的AES密钥。然后，前后端就可以利用AES密钥对称加密进行数据交互。详细步骤如图所示。RSA+AES混合加密，结合了两种加密方式的优点。

3、为了实现登录逻辑，前端需要在点击登录按钮时获取用户输入的账号、密码及时间戳。然后，对密码进行AES加密，生成签名，并发起AJAX请求。后端接收到请求后，验证签名、解密密码并与数据库进行匹配，最终返回登录结果。通过以上步骤，前后端交互完成登录功能。

4、后端实现代码依赖Spring Boot框架和Spring Security。实现登录校验时，需要引入BCryptPasswordEncoder类。该类用于生成和验证密码哈希值。

5、加密实现：在SpringBoot中，通过RSAUtils类提供生成密钥对、加密和解密的方法。前端使用JSEncrypt库对POST请求的用户信息进行加密，登录成功后返回的Token也进行加密处理。签名验证 签名目的：确保请求的完整性和有效性。前端查询操作在请求中包含公钥和已加密的参数，后端通过RSA解密并验证签名。

网站后台与前台页面不对应

在开发过程中，前端与后端数据的不对应问题是一个常见的挑战。前端页面的设计与后端数据的展示不匹配，会导致用户体验的下降。前端页面需要依赖后端提供的数据来展示，如果前后端的数据接口定义不一致，或者数据格式不同，前端页面将无法正确加载和展示数据。

两者负责的领域不同 前台呈现的是界面，是和用户打交道的，一般用户在浏览器上看到的网站页面属于前台。后台是网站管理者进行管理操作、数据处理的，后端程序员对后台数据进行操作。例如动态的网站与静态的网站是前端来负责的，数据库的增删改查是后端工程师来操作的。

面向对象不同 网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内容和页面。网站后台主要是用于对网站前台的信息管理，如文字、图片、影音、和其他日常使用文件的发布、更新、删除等操作，同时也包括会员信息、订单信息、访客信息的统计和管理。

从前台和后台的功能区分来看，前台主要是为普通用户设计的界面和交互，后台则面向网站管理员，用于管理和维护网站。比如，当你在网站上注册一个用户名时，这个操作在用户看来是前台的界面操作，但实际上这些信息会被保存在服务器的数据库中。

解决前后端分离开发,后端重定向不到前端页面问题

1、公司项目使用的是springboot+angularjs这种前后端不完全分离的开发方式，前段时间把项目改成springboot+vue前后端完全分离，开发过程中有个后端重定向问题。

2、对于 404 错误问题，我们可以通过动态路由配置来解决。动态路由允许根据不同的参数匹配不同的页面，例如根据用户 ID 来展示不同的用户数据。这样，无论用户尝试访问是否存在页面的路径，系统都会自动重定向至登录页面或提供适当提示，避免显示空白页面。

3、前、后端开发工程师都需要把整套代码导入开发工具才能开发。此阶段下前后端代码以及工作耦合度太高，前端不能独立开发和测试，后端人员也要依赖前端完成页面后才能完成开发。最糟糕的情况是前端工程师需要会后端模板技术（jsp），后端工程师还要会点前端技术，需要口头说明页面数据接口，才能配合完成开发。

4、工作流程概述： 用户通过前端页面发送登录请求到后端。 后端使用自定义的UserDetailsService验证用户名和密码。 如果验证成功，生成JWT并返回给前端。 前端在后续的请求中携带JWT。 后端使用JWT验证过滤器拦截请求，验证JWT的有效性。 如果JWT有效，允许请求访问受保护的资源；如果JWT无效或不存在，返回错误信息。

监控系统出现故障,应当如何排查和解决?

1、接触问题：检测一下摄像头与前端的接口与后端的录像机接口是否存在接触不良问题，如有重新压接接口，或重新焊接接口。短路问题：检测一下所有连接线路是否存在轻微短路，用万用表测量一下传输线路是否存在短路，如有分离开就可以了。摄像头问题：检测一下摄像头，如是其内部电路出了故障，返厂维修或更换。

2、确定故障类型：软件故障：通常表现为设置错误或软件损坏。解决方案是卸载并重新安装软件，或修复丢失的文件。硬件故障：涉及镜头、电源、连接线和BNC头等部件。排查时需逐一检查这些部件。针对硬件故障的具体排查步骤：无图像镜头确定：首先确定是哪个或哪些镜头无图像，通常是一两个镜头出问题。

3、监控系统的故障大致分为软件故障和硬件故障。软件故障包括软件损坏或设置错误，解决方案通常是卸载并重新安装软件，或修复丢失的文件。硬件故障涉及镜头、电源、连接线和BNC头等部件，排查时需逐一检查。遇到硬故障时，首先要确定无图像的镜头，通常是一两个镜头出问题。

4、检查电源线是否牢固连接到显示器和电源插座。检查电源线是否有损坏或者老化现象。更换电源线以排除故障。检查显示器设置 确保显示器的分辨率和刷新率设置与计算机的要求相匹配。检查显示器的亮度、对比度和色彩设置是否合适。更新显示器驱动程序以确保与操作系统的兼容性。

解决跨域问题后端请求头设置?

如何设置请求ajax发送跨域请求头在前端ajax请求时，我们在header中设置了自定义的头部信息，将token写入了头部，便于后端进行身份认证，如：xhr.setRequestHeader（Authorization，access_token）。通过了ajax全局方法做了统一处理。

一般是后端在处理请求数据的时候，添加允许跨域的请求头信息，服务端设置Access-Control-Allow-Origin就可以，如果需要携带cookie，前后端都需要设置 window对象有个name的属性，在一个window下，窗口载入的页面都是共享一个window.name。 在a.html中，怎么把b.html页面加载进来，获取b.html的数据。

AccessControlAllowCredentials：此响应头应设置为 true，以允许前端请求携带认证信息。OPTIONS 预检请求：当设置了 withCredentials： true，浏览器在发送实际请求之前，会先发送一个 OPTIONS 预检请求，以检查服务器是否允许跨域请求携带认证信息。

JS跨域问题常见的五种解决方式如下：CORS：CORS允许服务器明确指定哪些源可以访问其资源。后端通过设置AccessControlAllowOrigin头，如设置为*或特定域名，来允许跨域请求。这是现代浏览器支持的一种标准解决方案。jsonP：利用标签的src属性不受同源策略限制的特性。