JSONPはページとAPIのドメインが分かれても通信できますけどAjaxは同じドメインでないとできないんですよ

漢字のよみがな検索システムであるよみたんがAPIを提供しているということで、使ってみた。 が、初心者かと思われるような落とし穴にハマったので、自分への戒めのために、ことの次第を記す。

ハマったポイント

曰く

APIなのでAjaxなどから呼び出して使うこともできます。

とのことなので、jQueryに甘えてサクッと下記のようなコードを書いてみた。

<script type="text/javascript">
$(function(){
    $('#kanji').keyup(function(){
        $.ajax({ type: "GET",
             url:"http://yomi-tan.jp/api/yomi.php",
             dataType:"text",
             data:"k=h&t="+$('#kanji').val(),
             success:function(response_text){
                $('#response_field').text(response_text);
             },
        });
    });
});
</script>
<input type="text" id="kanji" >
<p id="response_field"></p>

書いてみたが、動かない。 非同期通信はリクエストもレスポンスも正常なのに、通信後の処理が動かない。

しばらく悩んで、答えはわかった。クロスドメインになるので動かないのだ。

ページ自体のURLは http://localhost/yomitan.html 、APIのURLはhttp://yomi-tan.jp/api/yomi.php 。ドメインが違うので、Ajaxの仕様上処理ができない。

以前にも踏んだことのある轍を再び踏んでしまった。自己嫌悪。

クロスドメイン環境で非同期処理を行うには

• Response HeaderにてAccess-Control-Allow-Originを指定する
• JSONPにする

といったような方法があるが、今回のAPIはレスポンスの形式を変えたりできないのでどちらも不可である。

では、どう解決したか

クロスドメインでの通信ができないのなら、自ドメイン下にAPIを実装すれば良い。 というわけで、接続を仲介するAPIを実装した。

ソースコード

yomitan.html 内のJavaScriptは、Ajaxで同階層のapi.phpを叩く。api.phpがよみたんAPIにアクセスして情報を取得するという仕組み。

動作例