node.js(express) 、angular.js クロスドメインの $http POSTにはまった

これまでにクロスドメインの対応をしたことはあったが、node.jsでは未経験でした。 PHPでは経験がり、サーバー側のレスポンスヘッダーへ以下を追加すればすぐにできるだろと思っていましたが、あまかった。苦戦したのでメモ。

Access-Control-Allow-Origin: *

クライスト側はangular.jsを利用しています。

■クライアント側

$http({
	method: 'POST',
	url : http://localhost:3000/hoge,
	headers: { 'Content-Type': 'application/json' },
	data: {"name" : "hoge", "text" : "hogehoge"},
}).success(function(data, status, headers, config) {
	console.log(JSON.stringify(data));
}).error(function(data, status, headers, config) {
	console.log("err");
});

■サーバー側

router.post('/hoge',function(request,response){
   	response.setHeader("Access-Control-Allow-Origin", "*");
	response.json(request.body);
    return;
});

 

 

angular.jsもあまり経験がなかったのでクライアント側の問題だと思い、

何度もangularの$httpを修正して調査した。
はじめは、「Request Method:OPTIONS」になっているこが問題だとPOSTになるよう修正していた。

angularをあきらめ、jQueryの$.ajaxを使っても解消されなかった。

 

そもそもそれが間違い

 

POSTするときのリクエストメッドは「Request Method:OPTIONS」でないといけなかった。
今までクロスドメインはGETしかしたことがなかった。POSTの経験はなかったことを今更気づく。

 

1.クライアントからサーバーへのリクエスト:Request Method:OPTIONS
2.サーバーからレスポンスが返ってきて許可がでる
3.クライアントからサーバーへのリクエスト:Request Method:POST
4.POSTの処理が完了してサーバーからレスポンス返ってくる

 

itbose.hatenablog.com
 
お探しのページは見つかりませんでした。 - はてなブログ
http://itbose.hatenablog.com/entry/2015/01/21/134056

npm install cors
でインストールし以下を実装。

 

var express = require('express');
var cors = require('cors');
var app = express();
app.use(cors());

 

※最初に実装した「response.setHeader(“Access-Control-Allow-Origin”, “*”);」は削除しておく

やっとこれでできた。3日はまった。

・参考サイト
http://itbose.hatenablog.com/entry/2015/01/21/134056
http://garafu.blogspot.jp/2013/07/blog-post.html