踩雷系列：%E2%80%8B 神奇的空白
此篇文章同時收錄在我的 Medium 中，之後都會統一更新在 Hexo 這邊囉！
事情是這樣發生的…
上週和後端工程師開始進行專案的協作時，他提供了一份 Swagger UI 的文件讓我們做 API 的介接。一開始我就像撰寫其他專案一樣，將 Swagger UI 文件內所有的 API 統一複製貼上到 All.js 的檔案中，並在需要使用的頁面來介接。不過就在使用第一個 GET 的 API 時就出現 status 404 的狀況：
問題出在？
通常出現 4 開頭的 status code 我就會確定是 client 端的問題，於是我就開始檢查我的 API URL 還有 axios 介接的方法有沒有寫錯？
不過怎麼檢查程式碼和檢視 nuxt 的撰寫方式後都看不出來哪邊有問題和狀況？所以我就回頭看看 Console 視窗內的這個錯誤訊息，這才發現到一個很詭異的地方：
咦？ URL 中間怎麼多了幾個 %E2%80%8B 的字串？
起初想說是不是 URL 自動將我的斜線編譯成 Unicode 了 ? 不過我又在 %E2%80%8B 後面看到了 / ，所以我就直接將 %E2%80%8B 這個字串丟到 Google 上去看了一下，究竟這是什麼鬼東西？
%E2%80%8B is the code for a “ZERO-WIDTH SPACE” character.
好！這下直接解開謎團了，原來是一個叫做 Zero-width space 的字元，中文翻譯也很直白，就叫做「零寬空格」。所以就如同字面上的意思，它是不會顯示出間隔的空格（怎麼有點饒口？）
使用 JS 的 decodeURI 將該編譯字元解碼後，可以看到解碼過後的空字串大家應該可以更加理解到什麼叫做「零寬空格」了吧？
所以知道問題出在哪邊之後就開始著手更改這些因為懶得自己打的 API URL 而報錯的狀況了
解決方法
如果專案內沒有太多的 API 那你可以先將複製貼上的 URL 移除後，再自行手動輸入即可（不要再偷懶ㄌ）。
不過如果是像我一樣一次大量的複製貼上的你，那就只能用程式碼來解決了
1 | url = decodeURI(encodeURI(url).replace(/%E2%80%8B/g, '')) |
記得在發送 Request 之前，將 URL 中的零寬空格使用空字串來取代。
後記
後來在找解決方法的時候，確實在 Stack Overflow 上看到很多從 Swagger UI 文件上複製貼上 URL 的開發者也遇到相同的問題。
也有蠻多人感嘆剛開始遇到這個問題真的百思不得其解？還跟後端對了好多次，透過 POSTMAN 等工具確認 API 介接都是正常無誤的，最後發現是這個問題的時候簡直傻眼的人也是不少。不過很幸運自己是在和後端求救之前有先找到問題點在哪的？
開發的日子久了，什麼奇怪的 Bug 都能遇到呢
這系列果然算是蠻快就更新了
希望大家很不幸遇到這個坑的時候可以馬上找到我這篇文章！
那我們下次再見ʘ‿ʘ
