AngularJSとNode+express間でJSONデータのやり取りを行う

前提

要素 バージョン
node 7.4.0
express 4.14.0
AngularJS 1.4.1
Chrome 55.0x

概要

AngularJSアプリで、特定のデータをNode+expressで稼働しているAPIサーバにJSON形式でアップロードする。
一見単純そうだったが、ググった単一の情報では上手く動かなく、色々調べてやっと動いたので備忘録として残す。

AngularJSによるJSON文字列のPOST

AngularJSの$httpサービスを用いて、非同期でAPIサーバにPOSTする。その際、POSTデータのContent-Typeをapplication/jsonにする必要がある。

転送するデータは、便宜上定数で用意したuserとする。$httpサービスの機能で、JavaScriptオブジェクトは暗黙的にJSONに変換されPOSTできる。

正常にレスポンスが返却されると、successメソッドで指定したコールバック関数が呼び出されるので、そこでレスポンスボディを標準出力している。

app.factory('my_controller' , ['$http' , function($http) {
  let user = {name: 'sasaki' , age: 24};
  return {
    upload() {
      $http(
        url: '/rest/user/post',
        method: 'POST',
        data: user,
        headers: {'Content-Type': 'application/json; charset=utf-8'}
      ).success(function(data, status, headers, config) {
        console.log(data);
      });
    }
  };
}]);

Node+expressによるPOSTデータの受信

body-parserのインストール

Node側で、application/jsonのPOSTを裁くには、別途Nodeモジュールのbody-parserが必要になるため、以下のコマンドでインストールする。

npm install -D body-parser

POSTデータの受信

前項でインストールしたbody-parserを用いて、JSONを捌けるようにする。

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

expressのルーティング機能を用いて、JSONを受け取る

reqオブジェクトのbodyに、JSONが文字列形式で含まれているのでそれを標準出力。
レスポンスは適当にsuccessと文字列を返しているだけ。

app.post('/rest/blog/post' , function(req , res) {
  console.log(req.body);
  res.send('success');
});

参考

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です