質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    19308questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2236questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Node:Postした値ががJson形式で表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,489

asakura

score 16

前提・実現したいこと

nodeのexpressでpostした内容をJson形式で表示するサンプルプログラムを作っていますが、
値を入力後、postしても値が表示されず、コンソールに以下のようなエラーメッセージが表示されます。

どのように対処したら良いでしょうか。

発生している問題・エラーメッセージ

Resource interpreted as Document but transferred with MIME type application/json: "http://localhost:3000/articles".

該当のソースコード

// server.js
// server.jsからroute.jsを呼び出しています

// expressの読出し
var express = require("express");
var app = express();

// morganの読出し
var morgan = require("morgan");
app.use(morgan("dev"));

// bodyParserの読出し
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 簡易ブログ作成
var router = require("./routes/route")(express);
app.use("/", router);

app.listen(3000, function() {
    console.log("Running on port 3000");
});
// 入力した値を代入するための変数
var articles = [];

module.exports = function(express) {

    var router = express.Router();

// postされた値を受け取り/articlesリダイレクト表示させる
    router.route("/articles")
        .get(function(req, res) {
            res.json(articles);
        }).post(function(req, res) {
            articles.push(req.boby);
            res.redirect("/articles");
        });

// put、deleteは未実装
    router.route("/articles/:id")
        .get(function(req, res) {

        }).put(function(req, res) {

        }).delete(function(req, res) {

        });

// /newで入力フォームを表示する
    router.get("/new", function(req, res) {
        res.send('<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>');
    });
    return router;
};

試したこと

postメソッド内に以下のjsonヘッダの情報を入れてみましたが、
見当違いらしく、解決に至りませんでした、

res.header('Content-Type', 'application/json; charset=utf-8')

補足情報(言語/FW/ツール等のバージョンなど)

node v6.11.0
express@4.15.3
body-parser@1.17.2

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

 エラーメッセージについて

リダイレクトする時の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 による、プログラムのミスだと思います。

--- /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.boby); // typo
+            articles.push(req.body);
             res.redirect("/articles");
         });

 私ならこう書く

// ./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) {
        const responseBody = formTemplate +
            '<code>' + JSON.stringify(articles) + '</code>';
        res.send(responseBody);
    });

    // APIs
    router.route('/articles')
        .get(function(req, res) {
            res.json(articles);
        })
        .post(function(req, res) {
            articles.push(req.body);
            res.redirect('/'); // 表示用のページにリダイレクト
        });

    return router;
};

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/18 23:20

    早速のご回答、ありがとうございます!

    Typoミス、お恥ずかしい限りです。。。

    また、Constの使い方、コード記述の仕方など、
    大変勉強になります、参考にして精進します!

    キャンセル

  • 2017/07/19 10:56

    今見ると、自分の回答・コードも細かいミスがいくつかあるので、「参考にします」っていわれるとそれはそれで恥ずかしいものではありますが。(なぜか `res.send(responseBody);` が2つあったり、「'」にすべきところが「"」になっていたり…。)(回答のコード直しますね)

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    19308questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    2236questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。