不要再複製了，url 空白編碼引起的事故！！！

最近在聯調接口時發現了一個要命的問題，就是接口url明明是正確的，可是發送就是不成功，報404異常的錯誤

代碼

僞代碼以下，一個很正常的刪除數據請求

function foo(id) {
  return axios({
    method: 'delete',
    url: '​/api​/resume​/queue​/' + id
  })
}

報錯

報錯以下：

這裏和後端一塊兒驗證過了，確實有這個接口，使用postman請求是沒問題的

查資料，反覆驗證

而後本身寫了個接口模擬了下，沒有重現這個問題，請求其它 api 也都正常

接着就是查各類資料，剛開始一度覺得是 delete 請求、vue-cli的鍋，查了各類資料，但仍是一無所得

沉思

最後看着 DELETE http://localhost:8070/%E2%80%8B/api%E2%80%8B/resume%E2%80%8B/queue%E2%80%8B/81862404 404 (Not Found) 這一段報錯信息陷入了沉思

404請求確定是接口地址不正確的問題，可是這裏的路徑看着沒問題（但也只是看着）

這裏發現最後請求的路徑加入了一些編碼，也就是 %E2%80%8B 這個，而後在控制檯調用 decodeURI('%E2%80%8B') ，返回 '' 空字符串，看到這裏應該明白了，嗯，倒吸一口涼氣...

緣由

若是將光標移動到 上面 url 路徑上，會發現每一個/前面須要移動兩次才能跳過，其實那兒確實有一個特殊的字符，只是它沒有寬度，讓人誤覺得是什麼也沒有，可是若是 encodeURI 編碼一下會發現確實是有東西的，也就是 %E2%80%8B

最後發現，仍是由於偷懶圖方便，接口地址直接從 swagger 文檔那邊複製過來的，而複製源裏面的字符存在空白編碼%E2%80%8B，空白編碼沒有寬度，雖然看不到可是會致使沒法精確匹配出現問題，瀏覽器對請求路徑會自動編碼，這樣路徑徹底就不同了，這個後端路由沒法識別，固然就404了

網上查了下，%E2%80%8E 的學名叫 Zero-width-space(零寬空格) ，顧名思義，它是一個Unicode字符，肉眼不可見，倒是確實存在的一個字符

解決

• 一時複製一時爽，一直複製一直爽，你沒法確認你複製的字符是否存在空白編碼，因此少點複製，仍是老老實實手敲一遍吧，尤爲是字符串的部分
• 從開發者的角度來看，能經過代碼解決的確定更好，其實能夠在發送請求以前對 url 作個正則匹配，將%E2%80%8B替換掉

僞代碼：

// 在請求發送前
url = decodeURI(encodeURI(url).replace(/%E2%80%8B/g, ''))

遇到這個問題其實挺無奈的，一個並不起眼的地方，若是你不注意，會致使你作不少無用功