概要
Nuxt.jsで作った本サイト（現在はNext.jsになっています。）の以下のページを Facebook にシェアしたら、ちょっと困ったことになっていた。
ブラウザでは正しいリンク先に飛べるけど、アプリの場合は開いた先が404エラーページになってします。アプリの場合は、アプリ内のwebビューで開くため、アプリ側で途中で何かしてるんでしょうか？
実際にアプリの場合はリンク先のアドレスが以下のように微妙におかしなことになっていた。
ドメインの後のスラッシュが// となっている箇所が原因で正しいルーティング処理が行われず、404エラーになっている様子。今回はこれを回避します。
どこで回避するか
サーバー ( nginx ) で回避する
サーバーサイド( express )で回避する
nuxt で 回避する
nuxt 内のルーティングの話なので、影響範囲的にも nuxt 内で解決できたらいいかなと思う。
なので、nuxt 内で回避する。
やったこと
/が重複するルートはクライアントサイドでは起き得ないので、サーバーサイドの初期処理内で済ませたい。
なので、store内の nuxtServerInitにて、以下の処理を加えた。 store/index.js nuxtServerInit({ commit }, { req, redirect }) {
if (req.url.includes('//')) {
redirect(req.url.replace(/\/+/g, '/'))
return
}
}
結果