GoogleCalendarAPIでデータを送るときは「contentType: 'application/json'」指定が必須！

2015.11.01 Javascript

標題のとおりなので気をつけましょう...というお話。
2時間ぐらいハマりました。

概要

GoogleCalendarAPIにjQuery Ajaxでデータの登録を試みた時に以下のようなエラーが発生。

This API does not support parsing form-encoded input.

原因

jQueryの$.ajaxを使う場合、標準でのcontentTypeは「application/x-www-form-urlencoded」になるようです。

$.ajaxのオプションに「contentType: 'application/json'」を指定すると無事に解決しました。

これまでデータ取得にしか$.ajaxを使用したことがなく、dataType: "json"とすることで受け取る際のデータはjsonとしてパースされていたので、送る時もよしなにしてくれるものだと勘違いをしていました。

正しく動作するコード

$.ajax({
	type: "POST",
	url: "https://www.googleapis.com/calendar/v3/calendars/" + targetCalendarId + "/events",
	contentType: 'application/json',
	dataType: "json",
	data: JSON.stringify({
		"description": "",
		"summary": item.summary,
		"transparency": item.transparency,
		"status": item.status,
		"start" : {"dateTime": item.start.dateTime },
		"end": {"dateTime": item.end.dateTime }
	}),
	headers: {
		'Authorization': 'Bearer ' + access_token
	}
});

普段あまり使うことの無かった、Chrome DevToolsのNetworkタブに助けられました。

この子、大変に優秀。