今天在調試過程中發現當請求參數中含有特殊字符時,某些參數值傳遞到后端時已經發生了變化,例如在請求參數中含有#字符時,后端收到的參數值是沒有#字符和其后面字符的內容,在Chrome瀏覽器中按下F12后在Network中可以看到請求的地址中針對含有#字符的請求參數,其#字符和后面的字符都被截斷了,於是想到需要對這類請求參數進行編碼處理。由於這個請求是編排器將Vue對象送給前端時created方法或computed方法自動調用的,所以要想在前端做修改是不太可能的了,只能在后端處理,但是后端處理后也是供前端調用的。那在后端哪里處理比較合適呢?應該有個拼接請求地址的地方吧,我們就從那里着手處理吧,這樣就可以對所有的某一類參數值進行設置。由於這個拼接的地址是要供前端調用的,所以在使用編碼方法時是能符合前端JS調用的才可以。這里想到了前端兩個編碼函數:encodeURI和encodeURIComponent,下面分別添加這兩個函數對請求參數進行編碼處理,看看效果。
(1)encodeURI函數
后端這樣拼接地址,例如:'http' + '//IP:port/targetAddress?param='+encodeURI(value),其中value是含有#字符的值
瀏覽器中結果顯示:#字符和其后面的字符依舊被截斷了
(2)encodeURIComponent函數
后端這樣拼接地址,例如:'http' + '//IP:port/targetAddress?param='+encodeURIComponent(value),其中value是含有#字符的值
瀏覽器中結果顯示:#字符和其后面的字符被編碼了,整個value值是被編碼后的字符串了,保留在請求參數中了。
從這兩個函數的編碼效果可以看出:在前端JS中encodeURIComponent函數可以對#字符進行編碼,而encodeURI函數不能對#字符進行編碼,依舊保留#字符原樣。延伸一下:encodeURI() 用於編碼整個URI,因為URI中的合法字符都不會被編碼轉換;而encodeURIComponent方法在編碼單個URIComponent(指請求參數)應當是最常用的,它可以將參數中的中文、特殊字符進行轉義,而不會影響整個URL。
雖然通過encodeURIComponent函數解決了#字符為請求參數時#字符和其后的字符都被截斷的問題,但是是為什么會被截斷呢?這是因為#字符對URI來說,它的作用是指向一個錨點,例如:xx?param=wb#gg,那么這URL實際上是定位到xx?param=wb這個頁面中的ID為gg的元素位置。所以自然而然地請求參數中就不會包含#字符和其后面的字符了,因為其特殊的含義決定了其作用。
要是不想主動調用encodeURIComponent函數對請求參數進行編碼,那么可以將請求參數放在請求體,在ajax中可以將參數放在data屬性中,這樣會自動調用encodeURIComponent函數對data數據進行編碼。
------20191202閃