HTMLでPUT, DELETEメソッドを送信する方法

Question

##前提・実現したいこと
ドットインストールのExpressコース（2014年に更新終了・アーカイブ済）で、Node.jsのExpressフレームワークを用いたブログの作成をしています。

記事の更新・記事の削除を実装したいのですが、コースのやり方に従うと、
「Cannot POST /posts/0」「404 (Not Found)」というエラーが出てしまいます。

HTTPのフォームで更新・削除の情報を送る時に、POSTメソッドをhidden属性でput(更新)、delete(削除)メソッドに変える処理を行って実装しているのですが、うまくput,deleteととして認識されていないせいでエラーになっているのではないかと思い、解決方法を質問致します。

よろしくお願い致します。

##現在のファイル構成

├── app.js
├── node_modules
├── package-lock.json
├── package.json
├── routes
│   └── post.js　//全てのルーティング処理
└── views
    ├── partials
    │   ├── footer.ejs
    │   └── header.ejs
    └── posts
        ├── edit.ejs //編集ページ
        ├── index.ejs //記事タイトル一覧ページ（編集・削除ボタン付き）
        ├── new.ejs
        └── show.ejs

##現在のコード

・app.js【メイン処理】

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const post = require('./routes/post')


app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

//middleware
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended:true}));


//記事一覧ページ
app.get('/',post.index);
//記事詳細ページ
app.get('/posts/:id([0-9]+)',post.show);
//新規作成ページ
app.get('/posts/new',post.new);
//新規作成した記事の投稿
app.post('/posts/create',post.create);
//更新のための編集フォーム表示
app.get('/posts/:id/edit',post.edit);
//更新した記事の投稿【PUTメソッド】
app.put('/posts/:id/',post.update);
//記事の削除【DELETEメソッド】
app.delete('/posts/:id/',post.destroy);


app.listen(3100, () => {
  console.log('server is up on port 3100')
});

・post.js【ルーティング処理】

var posts = [
  {title: 'title0', body: 'body0'},
  {title: 'title1', body: 'body1'},
  {title: 'title2', body: 'body2'},
]

exports.index = function(req,res){
  res.render('posts/index', {posts: posts});
};
exports.show = function(req,res){
  res.render('posts/show', {post: posts[req.params.id]});
};
exports.new = function(req,res){
  res.render('posts/new');
};
//更新のための編集フォーム表示
exports.edit = function(req,res){
  res.render('posts/edit', {post:posts[req.params.id], id:req.params.id});
};
//更新した記事の投稿【PUTメソッド】
exports.update = function(req,res){
 posts[req.body.id]={
   title: req.body.title,
   body: req.body.body
 }
 res.redirect('/');
};
//記事の削除【DELETEメソッド】
exports.destroy = function(req,res){
 posts.splice(req.body.id, 1);
 res.redirect('/');
};

exports.create = function(req, res){
  var post = {
      title: req.body.title,
      body: req.body.body
  };
  posts.push(post);
  res.redirect('/');
};

・index.ejs【記事タイトル一覧＆編集・削除ボタン】

<%- include ('../partials/header'); %>
<h1>Posts</h1>
<ul>
<% for (var i=0; i<posts.length; i++){ %>
<li>
    <a href="/posts/<%= i %>"><%= posts[i].title %></a>
    <a href="/posts/<%= i %>/edit">[Edit]</a>

//HTMLにはdeleteメソッドがないため、見せかけのコードで代用
    <form method="post" action="/posts/<%= i %>">
//以下の一文を入れるとdeleteメソッドとして認識されるはず
        <input type="hidden" name="_method" value="delete">

        <input type="hidden" name="id" value="<%= i %>">
        <input type="submit" value="削除">
    </form>
</li>
<% } %>
</ul>
<p><a href="/posts/new">Add new</a></p>
<%- include ('../partials/footer'); %>

・edit.ejs【編集ページ】

<%- include ('../partials/header'); %>
<h1>Edit</h1>
//HTMLにはputメソッドがないため、見せかけのコードで代用
<form method="post" action="/posts/<%= id %>">
   <input type="text" name="title" value="<%= post.title %>">
   <input type="text" name="body" value="<%= post.body %>">

//以下の一文を入れるとputメソッドとして認識されるはず
   <input type="hidden" name="_method" value="put">

   <input type="hidden" name="id" value="<%= id %>">
   <input type="submit" value="更新">
</form>

<p><a href="/">Back to Top</a></p>
<%- include ('../partials/footer'); %>

##問題点
「title0」の「削除」ボタン・「更新」ボタンを押すと、
Cannot POST /posts/0
404 (Not Found)

というエラーが出てしまう

##試したこと
「Cannot POST」と書かれているので、PUT,DELETEとして認識して欲しかったフォームの送信が、POSTとして認識されたままなのではないか？と疑っています。

input type="hidden" name="_method"を使ったPUT,DELETEの実装方法は古くなってしまっているのでしょうか？

2015年の記事『[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法』では有効だったようです。

こちらの記事（『PUTやDELETEのHTTPリクエストを送信する方法色々』）では、「HTMLのformで”_method”として指定する方法」は実装できず、「ブラウザのバージョンが上がったことにより、動作しなくなったのかもしれません」と書かれていました。

Comments

[hoshi-takanori]

ブラウザは基本的に GET と POST しか対応してなくて、input type="hidden" name="_method" を使うにはサーバー側に細工をする必要があるんだと思います。
https://github.com/expressjs/method-override

[moritat-222]

ありがとうございます。method-overrideライブラリでサーバー側に細工をする必要があった、ということですね！

Answer 1

[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法

質問者さんが読んだのはこちらの記事だと思います。
あたかもHTMLやChromeなどのブラウザが_methodに対応しているかのように記載されていますがこれは多分誤りです。

正確には、HTML自体がGETとPOSTにしか対応していない為、
Railsやsinatraという一部フレームワークではPOST通信の一部を無理やり改変して対応しているようです。
下記の記事が信憑性が高いように思えます。

参考記事: 【Rails勉強ネタ】　HTMLのformは本当にGETとPOSTに制限されている？？

Wiresharkでパケットキャプチャーして見た

確かにPOST メソッドのHTTPリクエストが送信されていることが確認できます。

また、HTML Form URL Encoded: application/x-www-form-urlencoded 内で

Form item: "_method" = "patch"というパラメーターが確認できる。
おそらくこのパラメーターを見て"patch"メソッドが送られたこととして処理しているんだと思われる（本当はPOSTメソッドを受け取っているが）。

---

対応策は下記の2つ

• JavaScriptのAjaxを使う
• Expressを拡張する

HTMLのform要素を使った送信ではGETとPOSTしか投げられません。
しかし、ブラウザ自体はPUTやDELETEにも対応しており、
JavaScriptの機能を使って送信する分にはそれらのメソッドを扱う事が可能です。

今どきのサイトは基本的にJSフレームワークなので、
Expressは勉強用と割り切って、Ajaxでの通信を学習し、
ゆくゆくはNext.jsやNuxt.js等のフロントエンドとバックエンドを両方面倒見るフレームワークに移行したほうが良いでしょう。

---

後者に関しても軽く調査してみました。
Railsに対応しているんだから、誰かなんかライブラリ作ってるやろな……

見つけました。

参考記事: Express 4.x でmethod-overrideでput / delete メソッドを使いたいにハマる。

Express4系では、別途method-overrideを使うのだとわかったので

_methodでメソッドを書き換えるのはWebサーバとして常に有効であるべき機能ではないので、こんな風にライブラリを咬ませる作りになっていたんですね。

expressjs/method-override - GitHub

Express.jsを作ったチームが用意しているライブラリなので、
問題なく扱えるでしょう。
Exampleを確認しながら進めてみてください。

Comments

[moritat-222]

回答ありがとうございます！
私の調べ方の至らなかった点と、その後の調べ方について言語化してくださり大変勉強になりました。
無事実装できました！

Answer 2

2015年の記事『[html/css] httpのフォームでDELETEやPUTのメソッドを送る方法』では有効だったようです。

活字は文字通り活きています。内容を正しく読めばわかるはずですが、無効と明記されています。

sinatraでAPIを作っていてはまったのだが、現在のブラウザはGETとPOSTの通信方式にしか対応していないらしい

対応方法として

1. フォームのマークアップ構造は form[method=post]>input[type=hidden][name=_method][value=DELETE]
2. POSTされたサーバー処理で {_method: "DELETE"}を 優先処理するコードにした。

という話です。

追記）

解決策

post() に指定するミドルウェア内で _method パラメータの有無で切り分ける。

---

リクエストメソッド は数多くありますが、ブラウザでは GET/POST で事足りるという実装で、２種類しか使えません。

どうしても他のメソッドを使いたい場合

1. WebフォームのPOST時のオレオレ・ルールを作る（フレームワークや言語レベルでのルール）。
2. サーバー側 POST後の処理を仕様とは異なる実装（ルールに応じたフォームパラメータ名_method の値）で判別、処理。ログアナライザの事情に合わせ、本来は POSTメソッドだが、別のメソッドだったとウソを記録する。

仕様に定められた通りに実装されていない環境下での「フェイク（誤魔化し）」の一例と言えます。

Comments

[moritat-222]

回答ありがとうございます。「現在では無効」という肝心のところを見落としてしまっていました…。
今回はExpressのライブラリのオレオレ・ルールで無事実装できました。
ありがとうございました！