回答編集履歴

1 「## 私ならこう書く」のコードのミスを修正

sitri

sitri score 30

2017/07/19 10:58  投稿

## エラーメッセージについて
リダイレクトする時のHTTP リクエストヘッダを見ればわかりますが、ブラウザが、「302でリダイレクトしている先のページが、HTML コンテンツ**以外**を返すことは、常識的に考えてありえないよね」という感じのリクエストをしているためです。ブラウザで何を使っているのかはわかりませんけれども、まぁそんな感じでしょう。
例えば、Google Chrome の場合、HTTP GET 時の HTTP ヘッダには
`Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8` をつけます。 `application/json` は含まれていません。(「明らかに RSS 2.0 フィードなURL」などの例外は除きます。)
リクエストで意図していない MIME Types がレスポンスされれば、ブラウザ的には「間違った(不正な)レスポンスが返ってきたから、なにもしないでおこう」となります。
## postしても値が表示されず について
`[]` は表示されているのでは?と思います。
配列に POST した値が入らないのは、ただの Typo による、プログラムのミスだと思います。
```fix_typo.diff
--- /var/tmp/84668/routes/route2.js   Tue Jul 18 14:40:24 2017
+++ /var/tmp/84668/routes/route.js   Tue Jul 18 14:40:03 2017
--- /var/tmp/84668/routes/route.js   Tue Jul 18 14:40:03 2017
+++ /var/tmp/84668/routes/route2.js   Tue Jul 18 14:40:24 2017
@@ -10,7 +10,7 @@
        .get(function(req, res) {
            res.json(articles);
        }).post(function(req, res) {
-           articles.push(req.body); // typo
+           articles.push(req.boby);
-           articles.push(req.boby); // typo
+           articles.push(req.body);
            res.redirect("/articles");
        });
```
## 私ならこう書く
```JavaScript
// ./routes/route.js
/**
* 投稿されたデータ
*/
const articles = [];
/**
* フォームのHTMLのテンプレート
*/
const formTemplate = `
<form method="post" action="/articles">
   <input type="text" placeholder="タイトル" name="title">
   <input type="text" placeholder="投稿者" name="author">
   <textarea placeholder="記事内容" name="body"></textarea>
   <button type="submit">投稿する</button>
</form>`;
module.exports = (express) => {
   const router = express.Router();
   // pages
   router.get("/", function(req, res) {
   router.get('/', function(req, res) {
       const responseBody = formTemplate +
           '<code>' + JSON.stringify(articles) + '</code>';
       res.send(responseBody);  
       res.send(responseBody);
   });
   // APIs
   router.route("/articles")
   router.route('/articles')
       .get(function(req, res) {
           res.json(articles);
       })
       .post(function(req, res) {
           articles.push(req.body);
           res.redirect("/"); // 表示用のページにリダイレクト
           res.redirect('/'); // 表示用のページにリダイレクト
       });
   
   return router;
};
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る