[vue.js] connect-history-api-fallbackでハマる→解決

意味をよくわかって使わないとダメだっていう例です。

最近Vue.jsにハマっており、楽しんで実装していました。
いろいろプログラムが作れるようになってきて、SPA独特の問題である

Hashbang がうざい

ってこと思い当たり、Vue.jsのヒストリーモードを使うことにしました。

やり方はいたって簡単。 Vueのルータに

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

って書けばいいだけ。簡単簡単。

しかし、そうは問屋が卸しません。

http://localhost/hoge/foo

などのアドレスに遷移したところで、ブラウザのリロードボタンを押すと

「そんなページはありません」

って怒られます。
そりゃそうです。SPAなんですから、そもそもページは一つ。
VueRouterがあたかも複数ページがあるように見せているだけなのです。

で、解決策をググること少し。

bripkens/connect-history-api-fallback

良いミドルウェアが見つかりました。

今度は完璧と思って意気揚々と作業を進めていると、そこから不可解な問題にぶち当たって悩むことに。

 Vue.jsを使ったプログラムのサーバ部は鉄板のexpressサーバです。
expressに書いたREST APIにアクセスできなくなってる。

ん？なんでだ？

少し時間がたってから、思いつきました。

「俺はさっき、localhost/の下のどのパスにアクセスしても、ルート(つまりlocalhost/)に飛ばすようなミドルウェアを入れているんだ」

ってことに。

アクセスしたいRESTAPIのパスが　localhost/hoge/bar　だったとしても、先ほどのミドルウェアのおかげで、localhost/ 直下にルーティングされちゃうのです。

このミドルウェアが特定のパスの下を除外する機能をもっていれば、REST APIは /api とかの下に書くのですが。

という段階で、まだ解決策は思いついておりません。

rest apiにアクセスするのにnode-fetchなんて使ったのがまずかったのか。素直にaxiosにすればいいのか。

探求は続きます（継続中）

※いきなりすぐに追記です。
どうやら、このミドルウェアは
・GETリクエストが対象
ってことらしいので、 APIを全部ポストにしてしまえば、問題なさそう。
IE11の問題があるので、確かにPOSTで統一するのも手かもしれません。
ただし、IE11なんてもう使っている人少ないだろうし、GETのところをいちいちPOSTで書くのも可読性や保守性が落ちる気がして、ちょっと気が進みません。

●解決

結局私が書いたコードに不備がありました。
（大抵はそういうものです）
RESTAPIに渡す時のHeaderに問題があり、POSTメソッドを途中からGETメソッドに変更したために、「application/json」の指定が「Content-type」のままになっていました。
「Accept」で指定しないと駄目ですね。 connect-history-api-fallback側のソースコードを見ていて「ハッ」と気が付きました。

です。
復讐するは我にありｗ