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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

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

JavaScript

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

Q&A

解決済

1回答

4931閲覧

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

asakura

総合スコア29

Node.js

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

JavaScript

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

0グッド

0クリップ

投稿2017/07/18 00:40

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

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

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

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

###該当のソースコード

js

1// server.js 2// server.jsからroute.jsを呼び出しています 3 4// expressの読出し 5var express = require("express"); 6var app = express(); 7 8// morganの読出し 9var morgan = require("morgan"); 10app.use(morgan("dev")); 11 12// bodyParserの読出し 13var bodyParser = require("body-parser"); 14app.use(bodyParser.urlencoded({ extended: true })); 15app.use(bodyParser.json()); 16 17// 簡易ブログ作成 18var router = require("./routes/route")(express); 19app.use("/", router); 20 21app.listen(3000, function() { 22 console.log("Running on port 3000"); 23}); 24

js

1// 入力した値を代入するための変数 2var articles = []; 3 4module.exports = function(express) { 5 6 var router = express.Router(); 7 8// postされた値を受け取り/articlesリダイレクト表示させる 9 router.route("/articles") 10 .get(function(req, res) { 11 res.json(articles); 12 }).post(function(req, res) { 13 articles.push(req.boby); 14 res.redirect("/articles"); 15 }); 16 17// put、deleteは未実装 18 router.route("/articles/:id") 19 .get(function(req, res) { 20 21 }).put(function(req, res) { 22 23 }).delete(function(req, res) { 24 25 }); 26 27// /newで入力フォームを表示する 28 router.get("/new", function(req, res) { 29 res.send('<form method="post" action="/articles">\ 30 <input type="text" placeholder="タイトル" name="title">\ 31 <input type="text" placeholder="投稿者" name="author">\ 32 <textarea placeholder="記事内容" name="body"></textarea>\ 33 <button type="submit">投稿する</button>\ 34 </form>'); 35 }); 36 return router; 37};

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

js

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

###補足情報(言語/FW/ツール等のバージョンなど)
node v6.11.0
express@4.15.3
body-parser@1.17.2

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

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 による、プログラムのミスだと思います。

fix_typo.diff

1--- /var/tmp/84668/routes/route.js Tue Jul 18 14:40:03 2017 2+++ /var/tmp/84668/routes/route2.js Tue Jul 18 14:40:24 2017 3@@ -10,7 +10,7 @@ 4 .get(function(req, res) { 5 res.json(articles); 6 }).post(function(req, res) { 7- articles.push(req.boby); // typo 8+ articles.push(req.body); 9 res.redirect("/articles"); 10 });

私ならこう書く

JavaScript

1// ./routes/route.js 2 3/** 4 * 投稿されたデータ 5 */ 6const articles = []; 7/** 8 * フォームのHTMLのテンプレート 9 */ 10const formTemplate = ` 11<form method="post" action="/articles"> 12 <input type="text" placeholder="タイトル" name="title"> 13 <input type="text" placeholder="投稿者" name="author"> 14 <textarea placeholder="記事内容" name="body"></textarea> 15 <button type="submit">投稿する</button> 16</form>`; 17 18module.exports = (express) => { 19 const router = express.Router(); 20 21 // pages 22 router.get('/', function(req, res) { 23 const responseBody = formTemplate + 24 '<code>' + JSON.stringify(articles) + '</code>'; 25 res.send(responseBody); 26 }); 27 28 // APIs 29 router.route('/articles') 30 .get(function(req, res) { 31 res.json(articles); 32 }) 33 .post(function(req, res) { 34 articles.push(req.body); 35 res.redirect('/'); // 表示用のページにリダイレクト 36 }); 37 38 return router; 39};

投稿2017/07/18 05:48

編集2017/07/19 01:58
ndxbn

総合スコア30

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asakura

2017/07/18 14:20

早速のご回答、ありがとうございます! Typoミス、お恥ずかしい限りです。。。 また、Constの使い方、コード記述の仕方など、 大変勉強になります、参考にして精進します!
ndxbn

2017/07/19 01:56

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問