# 手順 n. SPAで動的URLをCloudFrontで受け付けたいが403エラーになる

# 問題

CloudFront で SPA を動かして、動的URLを受け付けたいが、
動的なパスの先に実ファイルは無いので、403 エラーになってしまう。

# 解決策

CloudFront の設定でエラーページの向き先を SPA の index.html にしてしまう。
なんとも乱暴な感じがする。

# もう1つの問題

別ディレクトリのパスを指した場合にも、SPA 側に飛ばされてしまう。

# 回避

根本解決ではないが、
Router で違う方のディレクトリに来たら、もう一方の route に飛ばすことにした。
こんなので良いのかは不明だが、まあいいや。

router/index.ts

router.beforeEach((to, from, next) => {
  const path = to.fullPath;
  if (path.startsWith('/x/')|| path === '/x') {
    location.href = '/x/';
    return;
  }
  next();
});

[ 📩 ご意見 ]