在登入後,將token資訊放入localstorage中:
login:
function());}
在另乙個頁面查詢分類列表時,將請求頭加上token
//axios全域性配置
axios.defaults.headers[
'token'
]= window.localstorage.
getitem
("token");
findcategorylist()
)}
但是發現失敗了:
options請求401,另乙個則也出現跨域,headers中的token已經加上了
於是乎,檢視登入***的列印資訊,發現並沒有獲取到token,後端也是允許跨域的
//登入***
public
class
authinterceptor
extends
handlerinterceptoradapter
//取出請求頭中的token
string token = request.
getheader
("token");
system.out.
println
("token: "
+ token);if
(stringutils.
isempty
(token)
)//解析token
trycatch
(exception e)
return
true;}
}
/**
* 全域性跨域解決
*/@configuration
public
class
corsconfig
implements
webmvcconfigurer
}
查詢資料發現,查詢請求發出前的options請求是檢查伺服器是否支援跨域請求的,它並沒有帶上headers中的token資訊,所以後台在接到options請求後獲取不到token資訊,直接返回了。所以前端也出現跨域情況。
解決方案:
只需要放行options請求即可
//放行登入請求
if(request.
getrequesturi()
.contains
("/user/login"))
//放行options請求
string method = request.
getmethod()
;if("options"
.equals
(method)
)//取出請求頭中的token
前後端分離中axios的post請求問題
form 是乙個物件 裡面儲存有登入名 密碼 使用者類別 此時前端傳送請求時 post請求可以到達後端 但是引數無法獲取 後端使用spring mvc的話 不能直接通過引數名獲取前端傳過來的引數 但是可以使用 requestbody mapparams的方式獲取傳入引數 不過如果使用 request...
前後端的分離
對於大部分應用,已經不需要從後端讀取html頁面或者模板,前端完全可以根據資料自行渲染頁面 模板,這樣,前後臺互動就可以簡化為資料的增刪改查。利用ajax技術,實現頁面區域性重新整理,促使了前後臺分離的可能性。那麼,如何利用前後端分離開發模式,開始乙個專案呢?1.產品文件 產品經理會先設計好整個產品...
前後端分離及使用前後端分離的原因
前後端分離指的是前端採用純html頁面,通過ajax向後台請求資料。使用前後端分離的原因,通過在後台設定引數,可以控制html在遊覽器的快取時間,遊覽器訪問頁面時不需要向後台傳送請求。減少了後台伺服器的壓力。判斷遊覽器是否取的是快取 cache control max age 3600 響應頭中有這...