2022年9月21日

Vue RouterでURL直接入力でエラーになる対処法（Tomcat)

Vue Routerで画面遷移の制御をしていると、Apacheやtomcatなどのサーバに配置した際に、URL直接入力やブラウザ更新時に対象URLが存在というエラーが起きる事があります。
その理由は、Vue.jsはVueプロジェクトをビルドした際に作成される、index.htmlというファイルを呼ばれる事が前提になっているからです。
なので、Vue Router上で「/accountList」のような指定をしてもhttpサーバ上で有効なパスという分けではないみたいです。

そこを解消する為の手段が用意されていますが、それのtomcatでの解消方法を1つ紹介したいと思います。

Filterクラスを使用して、特定のURLが来た場合はVueプロジェクトで作成したindex.htmlにディスパッチする単純なものです。

・SecurityConfigクラス

今回はWebSecurityConfigurerAdapterにフィルターの許可を実装します。

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
    //RedirectFilterの使用情報を記述する
    @Bean
    public FilterRegistrationBean<RedirectFilter> createRedirectFilter() {
        FilterRegistrationBean<RedirectFilter> registrationBean = new FilterRegistrationBean<RedirectFilter>();

        registrationBean.setFilter(new RedirectFilter());
        
        // /goodsListと/accountListの時にRedirectFilterを呼ぶ
        registrationBean.addUrlPatterns("/", "/goodsList","/accountList");
        registrationBean.setName("redirectFilter");

        return registrationBean;
    }
}

・RedirectFiterクラス

@Component
public class RedirectFilter implements Filter {

  @Override
  public void init(FilterConfig filterConfig) throws ServletException {
  }

  @Override
  public void destroy() {
  }

  @Override
  public void doFilter(
        ServletRequest request,
        ServletResponse response,
        FilterChain chain) throws IOException, ServletException {


	   HttpServletRequest httpReq = (HttpServletRequest) request;

     //index.htmlにディスパッチする。これでうまくできました。
	   httpReq.getRequestDispatcher("/index.html").forward(request, response);

   }
}

Apacheでは.htaccessに次の記述をする。
尚、Vueプロジェクトのビルド時に自動的にdistフォルダ内で出来るみたいです。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Vue RouterでURL直接入力でエラーになる対処法（Tomcat)

お問い合わせ ITに関するお悩み不安が少しでもありましたら、ぜひお気軽にお問い合わせください

お問い合わせ ITに関するお悩み不安が少しでもありましたら、
ぜひお気軽にお問い合わせください