記一次前后端關(guān)于Cookie調(diào)試的問(wèn)題
背景
前端web頁(yè)面在刷新頁(yè)面之后菲语，無(wú)法再?gòu)腃ookie中獲取的token信息陨舱，進(jìn)而導(dǎo)致后續(xù)跟用戶權(quán)限和操作相關(guān)的接口前端都會(huì)調(diào)用失敗当窗。
問(wèn)題定位
1. 前端
最開始主要是在測(cè)試時(shí)偶然的刷新了web頁(yè)面刚陡，接口各種調(diào)用失敗溯革，可以很明顯的從瀏覽器調(diào)試工具的Network里面的請(qǐng)求中少了token的參數(shù)爽茴，而且在刷新頁(yè)面后必然復(fù)現(xiàn)寒矿，于是直接在自己負(fù)責(zé)的接口當(dāng)中添加了通過(guò)Cookie獲取token的參數(shù)(雖然這就是最正確的方式蹋半，但是在最開始并沒(méi)有在意)鹦聪，部分接口的問(wèn)題解決账阻，但是其他接口仍然有問(wèn)題。
2. 后端
之后猜測(cè)是否是因?yàn)槿萜鞯膯?wèn)題泽本，雖然本地運(yùn)行正常淘太。抱著試一試的態(tài)度，將前端項(xiàng)目由jetty啟動(dòng)改為由tomcat啟動(dòng)规丽，問(wèn)題并沒(méi)有解決蒲牧，于是陷入僵局，于是問(wèn)題回到前端為什么無(wú)法操作Cookie赌莺。
解決
順著剛剛的線索在百度了一番(程序員為什么一定要用google冰抢，手動(dòng)doge)，找到了httpOnly這個(gè)配置艘狭，這個(gè)配置的描述翻譯過(guò)來(lái)就是當(dāng)設(shè)置為httpOnly后挎扰，Cookie的內(nèi)容會(huì)對(duì)客戶端的腳本隱藏，而瀏覽器可以隨意的操作巢音，刪除修改保存遵倦。于是在源碼中寫入Cookie的類中發(fā)現(xiàn)了setHttpOnly這個(gè)flag的配置。
然后仔細(xì)找了找httpOnly這個(gè)標(biāo)識(shí)的位置官撼，主要是為了安全梧躺，因?yàn)镃ookie最開始是由客戶端自己生成，所以會(huì)包含用戶自己本地的部分信息傲绣，但是現(xiàn)在大部分token或者sessionId有服務(wù)器來(lái)管理掠哥，對(duì)token泄漏的風(fēng)險(xiǎn)因服務(wù)器的各類驗(yàn)證策略的加強(qiáng)而不再那么嚴(yán)重。
總結(jié)
前端js操作由于其特性斜筐，所以很多情況下其實(shí)還是由后端占主導(dǎo)地位龙致，所以當(dāng)前端無(wú)法進(jìn)行部分操作時(shí)，應(yīng)該從后端返回的報(bào)文中看看是不是因?yàn)椴缓侠淼呐渲没蛘邩?biāo)識(shí)導(dǎo)致的顷链。
延伸
期間查詢了vue項(xiàng)目的啟動(dòng)方式，vue開發(fā)主要配合node.js使用屈梁，雖然也可以直接使用node.js運(yùn)行項(xiàng)目可能會(huì)有一些安全風(fēng)險(xiǎn)嗤练，如項(xiàng)目的權(quán)限是node.js的啟動(dòng)權(quán)限，可能會(huì)被滲透攻擊在讶，js腳本會(huì)直接暴露給用戶煞抬，會(huì)暴露系統(tǒng)缺陷；第二就是部署上的問(wèn)題构哺，需要將源碼直接放到服務(wù)器上革答，可以在服務(wù)器中直接修改战坤，會(huì)因?yàn)檎J(rèn)為原因?qū)е路?wù)器上的版本和發(fā)布版本不一樣。
tomcat和jetty啟動(dòng)vue項(xiàng)目的方式：
先使用node.js的build進(jìn)行編譯残拐，進(jìn)入項(xiàng)目目錄后執(zhí)行命令npm run-scripts build途茫，編譯結(jié)束后會(huì)在目錄中生成一個(gè)dist目錄，將dist目錄中的內(nèi)容全都轉(zhuǎn)移到tomcat的webapps中的新建目錄下也可以直接將dist目錄直接復(fù)制過(guò)去溪食，啟動(dòng)tomcat或者jetty后囊卜，直接通過(guò)host:port/<dirName>就可以訪問(wèn)自己的vue工程了。
當(dāng)vue啟動(dòng)空白頁(yè)問(wèn)題：
1.config下index.js中的assetsPublicPath從'/'改為'./'
2.工程目錄下index.xml文件中script標(biāo)簽中的src屬性從絕對(duì)路徑改為相對(duì)路徑：
<script src="./static/<app js path>" type="text/javascript"></script>
