get通信でURLからパラメータを取得しようとした際に、あるページから飛ぶと「URIError: malformed URI sequence」というエラーが起こっていました。
やりたかったこと
フロント側でURL内の文字列を取得し、必要箇所にその文字列を出力したかったです。
エラー原因
MDNを読んでいると、URIエラーが起きるのは、不正に利用された場合とのこと。
不正ってなんだ不正って！！と思っていたのですが、取得できていたデコード前のURIを変換サイトで変換してみると、デコードができませんでした！！
恐らく処理の途中で、文字列が崩れてしまったのではないかと考えます。
解決方法
至って簡単です。URIの取得時点でデコードしておくこと。
私の場合は、「URI取得→処理→デコード」という順で行っていたところを、「URI取得→デコード→処理」という順に直したら上手く動くようになりました。今考えると、なぜ処理を実行する前にデコードしなかったのか…(゜-゜)
参考までにコードの抜粋も載せておきます。
...
// 記載方法はReact×Typescriptです。
let search_params: string = decodeURI(useLocation().search); // 取得時点でデコードしておく
const [ keyword, setKeyword ] = useState('');
useEffect(()=>{
getKeywordFromURL();
},[])
const getKeywordFromURL = () => {
if(search_params.match("&key=")){
let index_key = search_params.indexOf("&key=") + 5;
default_keyword = search_params.substr(index_key, search_params.length - index_key);
setKeyword(default_keyword);
}
}
...
