雖然在實際開發(fā)過程中用的很少,這里記錄一下遇到的問題。因為有一次導致前端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>請求轉發(fā)與重定向</title>
<link rel="stylesheet" href="./hello.css">
</head>
<body>
<h1 class="h1-font-color">請求轉發(fā)與重定向</h1>
<img src="./img/Cyberpunk2077.jpg" alt="圖片加載失敗">
</body>
<script src="./js/jquery-3.7.1.min.js"></script>
</html>
前端文件路徑
請求轉發(fā)
URL變化:127.0.0.1:8080/test/hello 不改變
發(fā)現前端樣式已經丟失,html加載的css,js和圖片資源出現了404:因為轉發(fā)依靠的是127.0.0.1:8080/test路徑,在該路徑下在加載資源路徑加載錯誤,就出現了404導致前端頁面樣式丟失的問題。
如果請求轉發(fā)非要訪問這些資源的話需要注意層級關系,解決掉層級關系即可
因為后端接口在訪問之前多了個 test 層級,那么相對應的前端頁面訪問的時候如果多一層路徑層級即可訪問成功,對應的把 .html 文件移動到 html 目錄下。此時即使有層級的js、圖片資源和無層級的css資源都會成功訪問【注意修改后端代碼/html】
請求重定向
URL變化:127.0.0.1:8080/test/hello2 -> 127.0.0.1:8080/hello.html
前端頁面完整,各種相對路徑下的資源都訪問成功
重定向前加一層層級也可以正常訪問
總結
請求轉發(fā)文章來源:http://www.zghlxwxcb.cn/news/detail-832813.html
- 服務器內部進行轉發(fā),用戶只感受到向URL發(fā)送了一個請求并收到了響應,并不知道中間是否經過了請求轉發(fā)
- 請求的URL前后不會改變,因此特殊情況下會導致前端資源訪問404
- 服務器收到請求后,會將該請求交付給另外一個請求去處理并將響應結果返回給用戶
請求重定向文章來源地址http://www.zghlxwxcb.cn/news/detail-832813.html
- 服務器收到請求后會響應客戶端訪問另外一個URL,客戶端收到響應后會重新發(fā)起請求訪問重定向的URL
- 請求的URL前后發(fā)生改變【前端資源不會加載失效】
- 重定向可以是服務器重定向【HTTP狀態(tài)碼301或302】也可以是客戶端【JavaScript代碼:window.location.href=“xxx.html”】
到了這里,關于后端請求轉發(fā)與請求重定對于向前端靜態(tài)資源的加載影響的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!