目次
前提
要素 | バージョン |
---|---|
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'); });