后端请求转发与请求重定对于向前端静态资源的加载影响

虽然在实际开发过程中用的很少,这里记录一下遇到的问题。因为有一次导致前端CSS样式文件无法加载,最后找出BUG的步骤

准备工作

后端代码

@Controller
@RequestMapping("/test")
public class ForwardAndRedirect {@GetMapping("/hello")public Object hello() {return "forward:/hello.html";}@GetMapping("/hello2")public Object hello2(){return "redirect:/hello.html";}
}

前端代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>请求转发与重定向</title><link rel="stylesheet" href="./hello.css">
</head>
<body>
<h1 class="h1-font-color">请求转发与重定向</h1>
<img src="./img/Cyberpunk2077.jpg" alt="图片加载失败">
</body>
<script src="./js/jquery-3.7.1.min.js"></script>
</html>

前端文件路径
在这里插入图片描述

请求转发

URL变化:127.0.0.1:8080/test/hello 不改变
在这里插入图片描述

发现前端样式已经丢失,html加载的css,js和图片资源出现了404:因为转发依靠的是127.0.0.1:8080/test路径,在该路径下在加载资源路径加载错误,就出现了404导致前端页面样式丢失的问题。
如果请求转发非要访问这些资源的话需要注意层级关系,解决掉层级关系即可
因为后端接口在访问之前多了个 test 层级,那么相对应的前端页面访问的时候如果多一层路径层级即可访问成功,对应的把 .html 文件移动到 html 目录下。此时即使有层级的js、图片资源和无层级的css资源都会成功访问【注意修改后端代码/html
在这里插入图片描述
在这里插入图片描述

请求重定向

URL变化:127.0.0.1:8080/test/hello2 -> 127.0.0.1:8080/hello.html
前端页面完整,各种相对路径下的资源都访问成功
在这里插入图片描述
重定向前加一层层级也可以正常访问
在这里插入图片描述

总结

请求转发

  1. 服务器内部进行转发,用户只感受到向URL发送了一个请求并收到了响应,并不知道中间是否经过了请求转发
  2. 请求的URL前后不会改变,因此特殊情况下会导致前端资源访问404
  3. 服务器收到请求后,会将该请求交付给另外一个请求去处理并将响应结果返回给用户

请求重定向

  1. 服务器收到请求后会响应客户端访问另外一个URL,客户端收到响应后会重新发起请求访问重定向的URL
  2. 请求的URL前后发生改变【前端资源不会加载失效】
  3. 重定向可以是服务器重定向【HTTP状态码301或302】也可以是客户端【JavaScript代码:window.location.href=“xxx.html”

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/488034.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Uipath 读取Word模板实现录用通知书PDF批量生成

本文主要讲解如何使用Uipath 读取Excel 面试人员信息表&#xff0c;读取Word模板&#xff0c;再批量生成录用通知书PDF文件&#xff0c;该自动化大大提高了HR 的工作效率。 注&#xff1a;本方案实现采用无代码模式&#xff0c;通过拖拉控件实现。 1. 数据准备 1.1 面试人员…

8.qt5使用opencv的库函数打开图片

1.配置opencv动态库的环境变量 2.在创建的qt工程中加入如下opencv代码&#xff0c;具体代码如下&#xff1a; 使用opencv库函数显示图片

【Python_Zebra斑马打印机编程学习笔记(二)】基于BarTender将btw文件转换为zpl文件

基于BarTender将btw文件转换为zpl文件 基于BarTender将btw文件转换为zpl文件前言一、BarTender1、BarTender 介绍2、BarTender 安装 二、导出 ZPL 文件1、导出 ZPL 文件步骤2、Zebra 打印机驱动安装 基于BarTender将btw文件转换为zpl文件 前言 本文介绍如何基于 BarTender 软…

全面解析企业财务报表系列之四:财务报表的真实性和可靠性

全面解析企业财务报表系列之四&#xff1a;财务报表的真实性和可靠性 一、什么是会计方法二、选择会计方法三、会计方法的重要性四、会计报表常用的造假手段五、财务报表经常被遗漏的重要事件六、财务报告造假的资信敏感性七、财务报告审计的重要性八、审计报告 一、什么是会计…

线性代数:向量、张量、矩阵和标量

线性代数&#xff1a;向量、张量、矩阵和标量 背景 在线性代数中&#xff0c;向量、张量、矩阵和标量都属于基础概念&#xff0c;特别是最近AI的爆火&#xff0c;向量和张量的概念也越来越普及&#xff0c;本文将介绍下这些基本概念。 1. 标量&#xff08;Scalar&#xff0…

mybatis中foreach批量插入并返回主键

背景 批量插入多条数据,插入成功之后每条数据中需要返回自增主键.处理办法 1.确定项目中mybatis版本,要求3.3.1以上. 查看springboot中项目版本方法: pom.xml中进入依赖(Ctrl点击进入): <dependency><groupId>org.mybatis.spring.boot</groupId><artifac…

docker运行onlyoffice,并配置https访问【参考仅用】

官方说明&#xff1a; Installing ONLYOFFICE Docs for Docker on a local server - ONLYOFFICEhttps://helpcenter.onlyoffice.com/installation/docs-developer-install-docker.aspx 一、容器端口、目录卷映射 sudo docker run --name容器名称 --restartalways -i -t -d -p…

国家建筑装配式内装产业基地在沪成立,副主任单位优积科技协同助推绿色低碳循环发展

上海市室内装饰行业协会装配式内装产业专业委员会成立大会暨“国家建筑装配式内装产业基地”项目启动会于3月21日下午1点在上海光大酒店隆重举行。出席此次活动的包括市装协会长徐国俭&#xff0c;市装协党支部书记兼秘书长丛国梁&#xff0c;市装协装配式内装委主任顾泰昌&…

汇编反外挂

在软件保护领域&#xff0c;尤其是游戏保护中&#xff0c;反外挂是一个重要的议题。外挂通常指的是一种第三方软件&#xff0c;它可以修改游戏数据、操作游戏内存或提供其他作弊功能&#xff0c;从而给玩家带来不公平的优势。为了打击外挂&#xff0c;游戏开发者会采取一系列措…

【计网】TCP的三次握手四次挥手

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 三次握手&#xff08;Connection Establishment&#xff09; 四次挥手&#xff08;Connection Termination&#xff09; 结语 我…

协议的概念+本质+作用+最终表现形式,网络问题(技术+应用+解决的协议+存在原因),主机的对称性

目录 协议 概念 示例 -- 摩斯密码 本质 作用 网络问题 引入 技术问题 应用问题 主机的对称性 问题对应的协议 问题出现的原因 理解协议(代码层面) 举例 -- 快递单 协议的最终表现形式 协议被双方主机认知的基础 协议 概念 协议是在计算机通信和数据传输中规定通…

2024年 最新python调用ChatGPT实战教程

2024年 最新python调用ChatGPT实战教程 文章目录 2024年 最新python调用ChatGPT实战教程一、前言二、具体分析1、简版程序2、多轮对话3、流式输出4、返回消耗的token 一、前言 这个之前经常用到&#xff0c;简单记录一下,注意目前chatgpt 更新了&#xff0c;这个是最新版的&am…