WEBアプリ開発記

~備忘録としてね~

SpringMVC × jQuery Ajax × iOS Chromeでエラーになる件の解決方法

他のブラウザでは問題ないのだけれども、iOSChromeだけでjQueryajaxがエラーになる件で苦しんだのでメモ。

記事をいろいろ漁っても大体「iOSChromeは捨てろ」なんてことが書かれており、個人的にiPhoneでもChrome使いたい自分にとってとても困った。

まず、クライアント側のajaxソースコードとしては以下のように単純。

var param = {
	type : 'POST',
	url : 'hoge/put-hoge',
	contentType : 'application/json; charset=utf-8',
	data : JSON.stringify({
		param1 : 'aaa',
		param2 : 'bbb',
	}),
};
$.ajax(param).done(function(receiveData, textStatus, jqXHR) {
	console.log(receiveData);
}).fail(function(jqXHR, textStatus, errorThrown) {
	var message = 'status"=' + jqXHR.status + '", textStatus="' + textStatus + '", errorThrown="' + errorThrown + '"';
	alert(message);
});

そして、サーバーサイドのメソッドは以下のように

@RequestMapping(value = "hoge/put-hoge", method = RequestMethod.POST)
@ResponseBody
public String putHoge(@RequestBody Map<String, String> param) {
	String param1 = param.get("param1");
	String param2 = param.get("param2");

	// この辺でパラメータ使ってDBに書き込み

	return "success";
}

とまぁこちらも簡単にDBにこにょこにょして、文字列を返すだけなのだが、これがiOSChromeだけ上手くいかない。。
エラーの内容も、

status="0", textStatus="error", errorThrown=""

と、もう「何かしら起こりましたが何かしらダメです。何かは教えません。」て感じでクソ。
サーバーサイドではエラーは起こっていない。平然と「仕事しましたが何か?」って感じでこちらもクソ。

他のiOSSafariAndroidChromeでは全然行けるのに。。


問題は、サーバーサイドのメソッドアノテーションの記載が足りなかったことだった!
つまり、上記サーバーサイドのコードを

@RequestMapping(value = "hoge/put-hoge", method = RequestMethod.POST, produces = MediaType.TEXT_PLAIN_VALUE)

と、produceを追記してやればOK。
殆どのブラウザがレスポンスのメディアタイプを自動判別してくれてたってことなのかね。
記述が長くなるが、つけといた方がいいってことで了解しました。