【本番環境では】405ルーティングエラー。原因はaxiosのurlだった

○エラー内容・状況

The GET method is not supported for this route. Supported methods: POST.

ローカル環境では、同じコードでも問題なく動作していましたが、リリース環境になってから405エラーが出ました。

○解決方法

原因は、

Vue.js側のaxiosでPOSTで記載しているが、GETになってしまっている事でした。

sample.vue

const url = '/post/search/';
$('.bath-search .error').text('');
axios.post(url, {
    prefecture: this.selectedPrefecture,
    keyword: this.keyword,
})

原因のコードがこちら

const url = '/post/search/';

最後のスラッシュがいらないです。

const url = '/post/search';

○スラッシュの有無で結果が変わる理由

末尾のスラッシュの有無で、アクセス対象がディレクトリかファイルかが変わってしまいます。

末尾スラッシュが入っている場合、web サーバ（Apache, nginxなど）はHTTPステータス 301 のリダイレクトレスポンスを返すことが多いです。このリダイレクト時にはもともとのリクエストが POST メソッドであっても強制的に GET メソッドとなり、リダイレクト元とは全く違う API を叩くことになりバグとなりえます。

○参考