Same-Origin-Policy(SOP) 3つの回避方法


結論

SameOriginPolicyを「jquery.xdomainajax.js」というjQueryプラグインを用いて回避しました。

経緯

やっとAmazonProductAdvertisingAPIにリクエストを作ることができた」では、リクエストを作成するところまでできました。URLをブラウザに貼り付けて結果が返ってくるところまで確認しました。

しかし、XMLHttpRequestを使ってリクエストを投げようとしたら、投げれない・・・。

正確には、XMLHttpRequestでリクエストを投げても結果が返ってこない・・・。

全く同じURLでもコピペをすると正常な結果が返ってくるのに。です。

そんなわけで、ブラウザの開発者ツール(GoogleChrome)を使ってリクエストとレスポンスの流れをみてみました。以下のような3つのエラーが確認できました。

調べてみると、Same-Origin-Policy (SOP)なる制約があることを発見。ざっくり言うと、「AっていうドメインからBっていうドメインに勝手にリクエスト投げちゃダメ」という制約。

んで、これを回避する方法が冒頭の結論。

他にも回避方法があり、調べるために多くの時間を費やした自分のためにメモφ(..)

SOPの回避方法3つ

  1. “Access-Control-Allow-Origin” Header の付与
  2. JSONPを用いる
  3. 中継プログラムを用いる

それでは順番に見て行きましょう。

“Access-Control-Allow-Origin” Header の付与

“Access-Control-Allow-Origin” はレスポンスヘッダにつけることのできるヘッダです。

第三者(今回はAmazon)が公開するAPIに対して、このヘッダを付与するためには以下の2つの方法があります。

  • API提供側に“Access-Control-Allow-Origin”ヘッダをつける設定ができるように改修(?)依頼する
  • 自前でプロキシサーバを構築し、プロキシサーバで“Access-Control-Allow-Origin”を付与する

後者が現実的ですね。

JSONPを用いる

JSONP。これはSOP問題に引っかかってから何度も目にした単語。だけど、理解するのにはとても時間がかかった。

僕が理解できたのは「JSONPで悩むある程度の人々へ」のおかげ。

細かい内容は、リンク先で見てください。とても分かりやすいです。

中継プログラムを用いる

現在までに2つの方法が分かりました。

  • 以下のようなphpプログラムを用いる(「Web API/クロスドメインの制約回避」より引用)
    <?php
        if (isset($_GET["url"])) {
            header("Content-type: application/xml;");
            readfile($_GET["url"]);
        }
    ?> 

     

  • jquery.xdomainajax.js」というjQueryプラグインを用いる (内部では YahooAPIを使ってSOPを回避しているらしい)

結局、自分は一番最後のjQueryプラグインを使いました。一番簡単だったので。。。

以上、自分のためにメモ。