URL encode/decode

更新 發佈閱讀 2 分鐘

假如今天A網站要串B網站,網址如下, http://xxx.tsmc.com.tw/qwe?a=1&b=http://xxx.tsmc.com.tw/ghk?iu=3&re=ko&c=356

而其實http://xxx.tsmc.com.tw/ghk?iu=3&re=ko這個是完整的網址,因此B網站在取b參數的時候, 會拿到http://xxx.tsmc.com.tw/ghk?iu=3這個value,因為是根據&去拿的,&是網址中的關鍵字。

因此url encode 就是為了解決這種問題,網址中的params value 只要有可能含有關鍵字,最好都要做encode。

這樣B網站根據&去取參數的時候,就可以取到完整的資訊,再對param value 做decode 即可拿到原始值。

以javascript為例:

A網站先將含有關鍵字的param value做encode, 再去連B網站

encodeURIComponent("http://xxx.tsmc.com.tw/ghk?iu=3&re=ko");
=> http%3A%2F%2Fxxx.tsmc.com.tw%2Fghk%3Fiu%3D3%26re%3Dko

連結B網站的URL會變成:

http://xxx.tsmc.com.tw/qwe?a=1&b=http%3A%2F%2Fxxx.tsmc.com.tw%2Fghk%3Fiu%3D3%26re%3Dko&c=356

B網站根據&去取出參數,把b=的value decode,即可拿到原始的值。

decodeURIComponent("http%3A%2F%2Fxxx.tsmc.com.tw%2Fghk%3Fiu%3D3%26re%3Dko");

=> http://xxx.tsmc.com.tw/ghk?iu=3&re=ko



留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
一位長期推廣閱讀寫作、經營多個平臺,也是《30Days愛自己的小練習》作者,分享首次親自體驗蝦皮購物的歷程。以「網購小白」的角度,詳細介紹了蝦皮平臺操作的便利性,分享了加入分潤的七大好處、賺錢的五大撇步。文章穿插了雙12活動、購物連結及分潤連結,極具參考價值。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
(一)分享曾經在蝦皮買過的好物 這是一個真實的故事,筆者大約每半年會去蝦皮網站購買一種叫做永樂健的酵素,這是日本製造原裝進口的酵素,有兩種以上的口味(橘子口味、優酪乳口味),我都買橘子口味的,比較好吃,因為是台灣出貨,很快就會寄來。每次買30包,店家又加贈2包,等於擁有32包。
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
雙12即將來襲!今年不只是要買東買西,還要變身購物專家,就由我來推薦大家購物清單,裡面還有開箱文給大家參考。先來一個讓人逛街腳底舒服的「舒壓腳底按摩輪」,數位遊牧一定要帶的「無印良品筆電防震提袋」,讓我想去咖啡廳寫文章帶了就走,再來是居安思危、防災必備的 MVP「3Coins 手搖式收音機」,它還有
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
※ Params是什麼? 在網頁開發中,params代表的是參數(Parameters)。當你在路由(Route)中定義了一個或多個變數時,這些變數的值就會被存儲在 params 對象中。所以,params 就是用來存儲路由參數的地方,這些參數可以在處理請求時使用。 ※ Params的兩個功能:
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
那麼「我要什麼資料」就需要告訴伺服器特定的內容啦,舉例來說: 我要登入,就必須把「帳號」和「密碼」一起帶在請求內,發送給後端進行驗證
Thumbnail
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
Thumbnail
在前端開發中,很常會有需要轉址的需求,且處理的手法滿因人而異的,所以今天就想要來整理一些常見的 JavaScript 頁面轉址方式,以及各自的差異。
Thumbnail
介紹 這章節純看智商 不可逆加密:原文加密後變成密文,但密文沒辦法解密文回原文 可逆加密:原文加密過後的密文,可以在將密文解密回原文 對稱:表示加解密是否使用同一個key MD5 不可逆加密 MD5 使用的命名空間是 System.Security.Cryptography MD5是一種公開的算法
Thumbnail
介紹 這章節純看智商 不可逆加密:原文加密後變成密文,但密文沒辦法解密文回原文 可逆加密:原文加密過後的密文,可以在將密文解密回原文 對稱:表示加解密是否使用同一個key MD5 不可逆加密 MD5 使用的命名空間是 System.Security.Cryptography MD5是一種公開的算法
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
Thumbnail
網址是 API 的門面,大家使用 API 的第一步就是要看它。 第一眼就要讓人就知道這隻 API 在做什麼? 甚至因為遵循標準(目前 REST 是主流),可以類推 API 應該會有什麼功能等等。
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
Thumbnail
01-選擇器寫法 圖片來源:自己擷取電腦螢幕 1.可以下.main .img .hot span   控制到a 下面的兩個span 也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以 2.也可以下.hot .title  就單純控制span class="t
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News