2019-5-29 19:16
nuxt

重複スラッシュによるルーティングトラブルの回避

概要

以下のページを Facebook にシェアしたら、ちょっと困ったことになった。

https://imatomix.com/imatomix

困ったことというのは、ブラウザでは正しいリンク先に飛べるけど、アプリの場合は開いた先が404エラーページになっちゃう。。。アプリの場合は、アプリ内のwebビューで開くため、アプリ側で途中で何かしてるんでしょうね?

実際にアプリの場合はリンク先のアドレスが以下のように微妙におかしなことになっていた。

https://imatomix.com//imatomix

わかりますか?

imatomix.com//imatomix のところ、// となっている箇所が原因で正しいルーティング処理が行われず、そんなルートないよ的なエラーになっているようです。

今回はこれを回避します。

どこで回避するか

パッと思ったのは以下の3つ

  • サーバー ( nginx ) で回避する
  • サーバーサイド( express )で回避する
  • nuxt で 回避する

nuxt 内のルーティングの話なので、影響範囲的にも nuxt 内で解決できたらいいかなと思う。 なので、nuxt 内で回避する。

やったこと

/が重複するルートはクライアントサイドでは起き得ないので、サーバーサイドの初期処理内で済ませたい。 なので、store内の nuxtServerInitにて、以下の処理を加えた。

  • req.url ( URLのドメイン以下の部分) で/が複数連続している箇所があれば、
  • 1つの/にマージしたURLにリダイレクトする。

store/index.js

nuxtServerInit({ commit }, { req, redirect }) { if (req.url.includes('//')) { redirect(req.url.replace(/\/+/g, '/')) return } }

結果

https://imatomix.com//////imatomix

にアクセスしても

https://imatomix.com/imatomix

にリダイレクトされるようになった。