iphoneシミュレータで画像アップロードに失敗

WYSIWYGエディタのファイルアップロード機能をテスト中に生じたエラー

SummernoteというWYSIWYGエディタにAjaxの画像アップロード機能を実装したときの話。

WYSIWYGエディタで画像アップロード

Summernoteにおけるファイルアップロードの実装内容は上のURLにエントリーしてみた。実装後、iphoneシミュレータでAjaxアップロードのテストをしてみたところ、2つの要因でアップロードできない現象に遭遇した。

エラー項目は以下のとおり

• POSTリクエストがOPTIONSリクエストになってしまう
• statusコードは200だが空のレスポンスが返される

問題を発生させたコードを載せてみようと思う。

Ajaxのリクエスト先URLを絶対パスにすることでOPTIONSメソッドとして扱われなくなった

jQueryのAjaxリクエスト部分で当初URLを相対パスで書いていた。

$.ajax({
        data: data,
        type: "POST",
        url: "/summernote",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            editor.insertImage(welEditable, url);
        },
});

相対パスが原因でPOSTメソッドを指定しているにも関わらずOPTIONSメソッドとしてリクエストが解釈されていたようだ。

url: "http://test.com/summernote",

上の修正を行い再度画像のアップロードを試したところ、POSTリクエストが行えるようになったが、status code 200で空のレスポンスが返されるようになった。

Access-Control-Allow-Originの追加とレスポンスのjson化

最終的にjQueryのAjax部分は下の状態としてエラーを回避した。

$.ajax({
        data: data,
        type: "POST",
        url: "http://test.com/summernote",
        cache: false,
	dataType: 'json',
        contentType: false,
        processData: false,
        success: function(url) {
        	editor.insertImage(welEditable, url.url);
        },
});

根本的にはAjaxリクエストがクロスドメインのリクエストになってしまっていた部分に原因があったものと考えている。実装自体はサイト内で完結しているものの、iphoneシミュレータを介すことによりクロスドメインのAjaxリクエストが発生しており、その点をカバーできていなかったということになる。

サーバ側では、

• クロスドメインに対応するhttpヘッダ
• json形式でのレスポンス

双方の対応をすることでエラーを回避することができた。サーバ側のコードは下のように変更した。

header( "Content-type: application/json; charset=utf-8\n\n");
header( "Access-Control-Allow-Origin: *\n\n");
$destination = '/path/to/images/'.$filename;
$arr = array('url' => $destination);
echo json_encode($arr);
exit();

クロスドメイン間でのAjax通信に対応することで、iphoneシミュレータからの画像アップロードテストを行うことができた。