JSONPとは

JSONPとはJSONをブラウザに渡す方法の1つです

JSON with padding”の略で、通常は以下のようにJSONにそれをラップするJavaScriptを付け加えたもののことを指します

# JSONP

callback({"id": 1, "name": "Taro"})

何に使うか

XMLHTTPRequestは同一生成元ポリシーの制約によって、同じ生成元 (ドメインなど)へのアクセスしか行う事ができません

例えば自分が提供するサービスを別の利用者がページに埋め込んで使用したいと思った場合、ドメインが異なるため規制に引っかかり使用する事ができません

しかしJSONをscript要素を使ってJavascriptとして読み込めば、script要素は同一生成元ポリシーの規制対象外のためドメインを超えたアクセスが可能になります

# script内でJSONをJavaScriptとして読み込む

<script scr="https://api.example.com/v1/users?callback=callback"></script>

エラー処理の問題

JSONPではサーバーがエラーを返した際にうまく対応できないという問題点があります

script要素はエラーのステータスコードが返るとスクリプトを読み込むことをやめてしまうため、エラーが発生した場合クライアント側では何が起こったのかわからなくなってしまいます

そのため、JSONPを使う際にはエラーが発生しても200 (成功)のステータスコードを返し、レスポンスボディでエラーの内容を表現するように対応しなければなりません

# response body
{
    status_code: 404,
    error_message: "User Not Found"
}

エラーで200のステータスコードを返すのはかなり気持ち悪いですがJSONPにはこの方法が有効だそうです