本記事は、Method Not Allowed (POST)にお困りの方に向けた解決方法紹介記事です。

はじめに

form要素でPOSTを行っていた何の変哲もないHTMLがあり、ある時までは正常に動作していました。 しかし、ある日、HTMLには一切変更を加えていないにもかかわらず、突如として下記のエラーが発生するようになりました。

Method Not Allowed (POST): /hoge/page1/

原因

原因を解析していたところform要素のaction属性を空にしていたことが原因でした。 以下、コードを交えながら詳細に見ていきます。

問題の起きたform要素は/hoge/page2/で以下のようにhtmlを記載していました。
page2.html

See the Pen form要素action属性確認 by kaz12 Tech (@kaz12-Tech) on CodePen.

ご注目頂きたい点はaction属性を定義していない点です。

action属性が空または、この属性自体を省略した場合は、自身にデータを送信します。
つまりこの場合は、page2.htmlを表示している/hoge/page2/に送信されていました。

しかし、ある時、ブラウザバック対応によって/hoge/page2/に対して以下の処理が追加されました。

# とあるjavascript
window.onload = function () {
	history.replaceState(null,null,"/hoge/page1/");
}

この処理をpage2.htmlがロードされたタイミングで追加されたため、
/hoge/page2/で表示されていたpage2.htmlが、
/hoge/page1/で表示される事態となっていました。

こうして先ほどまで、/hoge/page2/に送信されていたPOSTメソッドが、 /hoge/page1/に送信されるようになってしまっていました。 このため/hoge/page1/を提供しているサーバーサイドは予期せぬPOSTメソッドを受けて表題のエラーが発生します。

仮に上記のjavascriptの記述をpage2.htmlがインポートしているjsファイルに追記されるとHTMLの変更なしにこの問題が発生します。

対策

対策は非常にシンプルです。 action属性を明示的に定義することです。定義していない場合振る舞いは今回の事態のように不定になり得ます。
当たり前ですが、明確に定義することの大切さを改めて知った次第です。

まとめ

本記事はMethod Not Allowed (POST)の発生要因の一つとなるform要素のaction属性が空であった場合の振る舞いを紹介しました。
省略記述は実装量が減り開発が楽になる一方で、省略された場合の振る舞いを正しく理解していないと思わぬ不具合を生むきっかけにもなります。
省略した場合の実装の容易さと、可読性や不具合の生みにくさとを天秤にかけながら開発していく必要があります。

また、Webの知識はWebで得ることが多く、知識が散逸的になりがちです。 一度以下の書籍などで体系立てて知識を得られるとしっかりとした土台ができるのでお勧めです。