2

デモ用にブラウザに移植しようとしているHTML5/JSアプリが動作しています。このアプリは、車両で実行するように構築されており、車両メーカーのネットワークAPIを使用してget/postリクエストを実行しました。

これのブラウザバージョンでは、get/postにjQueryを使用しようとしています。しかし、私はすぐに問題に直面しています。

XMLHttpRequest cannot load http://<API I AM CALLING>. Origin null is not allowed by Access-Control-Allow-Origin.

同一生成元ポリシーを調べましたが、まだ完全には理解していません。使用されているURLを参照して、取得しようとしているJSONを確認できます。

Webを見回すと、多くの人が私のajax呼び出しでdataTypeとしてJSONPを指定することを提案しました。私はこれを試してみましたが、成功しませんでした。 

            $.ajax({
                url: url,
                type: "GET",
                dataType: "jsonp",
                success: function (data, textStatus, jqXHR) {
                    log("success getting JSON from " + url);
                    success(data);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    log("error getting JSON from " + url + ", code " + JSON.stringify(jqXHR));
                    log("textStatus is " + textStatus);
                    log("errorThrown is " + errorThrown);
                },
            });

コンソールにエラーが表示されます：

Uncaught SyntaxError: Unexpected token :

その後、エラーコールバックが使用されます。

error getting JSON from http://<API I AM CALLING>, code {"readyState":4,"status":200,"statusText":"success"}
textStatus is parsererror
errorThrown is Error: jQuery180006523256213404238_1346098086632 was not called

サーバーが必要なJSONデータで応答しているようです。しかし、jQueryはこのデータが関数にラップされることを期待しているため、解析に失敗していると思います。

APIを呼び出しているサーバーを制御できません。データがブラウザに戻ってくるので、それにアクセスする方法が必要だと感じています。

注：
アプリはWebkitブラウザーのみを対象としているため、他のブラウザーをサポートする必要はありません。dataTypeを「json」のままにしておくとChromeで問題が発生するだけですが、セキュリティポリシーが異なるため、Safariは正常に機能しているようです。特別な引数を指定してChromeを起動するだけでなく、コードの回避策を探しています。これは、Apacheでコードをホストしている場合でもChromeで発生するため、index.htmlをローカルで開こうとしているだけではありません。

4

1 に答える 1

2

考えられる解決策の1つは、必要なJSONサービスをプロキシしてJSONPを返すサービスを作成することです。私はこのような多くのプロキシサービスを作成したので、同一生成元ポリシーを回避できます。

例： http： //high-cloud-3702.heroku.com/

このサービスは、アーバンディクショナリのjsonpプロキシです。

このようなプロキシをSinatraで非常に簡単に作成し、Herokuで無料でホストできます。

このようなプロキシの鍵は次のコードです。

get '/' do
  callback = params.delete('callback') # jsonp
  json = <function_to_get_data_here>.to_json

  if callback
    content_type :js
    response = "#{callback}(#{json})" 
  else
    content_type :json
    response = json
  end
  response
end
于 2012-08-27T20:38:34.987 に答える