24

問題があります... 「http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json」でjsonapiを取得しようとしています

このコードでオフラインモードにしようとすると（これは、メモ帳でそのjson APIをコピーし、ローカルホストで呼び出すことを意味します）...

function getLast(){
        $.ajax({
            url:"http://localhost/tickets/json/api_airport.json",
            type:'GET',
            dataType:"json",
            success:function(data){console.log(data.results.result[1].category);}
        });
    }

完璧に動作します。:)

しかし、このコードで実際のURL（ " http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json "）を実行しようとすると：

$.ajax({
            url:"http://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output=json",
            type:'GET',
            crossDomain:true,
            beforeSend: function(x) {
                if(x && x.overrideMimeType) {
                    x.overrideMimeType("application/j-son;charset=UTF-8");
                }
            },
            success:function(data){console.log("Success");}
        });

次に、私のgoogle chrome javascriptコンソールで、次のようなエラーが発生します：「XMLHttpRequestはhttp://api.master18.tiket.com/search/autocomplete/hotel?q=mah&token=90d2fad44172390b11527557e6250e50&secretkey=83e2f0484edbd2ad6fc9888c1e30ea44&output = ：// localhost）はAccess-Control-Allow-Originでは許可されていません。」

私は知っています、それはクロスドメインの問題でなければなりません、誰かが私を助けることができますか？nb：いくつかのコード、スタックオーバーフローコミュニティから入手しました....ありがとうございます:)

4

3 に答える 3

48

前進するには2つの方法があります。

JSONP

このAPIがをサポートしている場合JSONP、この問題を修正する最も簡単な方法&callbackは、URLの末尾に追加することです。試すこともできます&callback=。それが機能しない場合は、APIがサポートしていないことを意味するJSONPため、他のソリューションを試す必要があります。

プロキシスクリプト

クロスオリジンの問題を回避するために、Webサイトと同じドメインにプロキシスクリプトを作成できます。これはHTTPSURLではなくHTTPURLでのみ機能しますが、必要に応じて変更するのはそれほど難しくありません。

<?php
// File Name: proxy.php
if (!isset($_GET['url'])) {
    die(); // Don't do anything if we don't have a URL to work with
}
$url = urldecode($_GET['url']);
$url = 'http://' . str_replace('http://', '', $url); // Avoid accessing the file system
echo file_get_contents($url); // You should probably use cURL. The concept is the same though

次に、jQueryを使用してこのスクリプトを呼び出すだけです。urlencode必ずURLを確認してください。

$.ajax({
    url      : 'proxy.php?url=http%3A%2F%2Fapi.master18.tiket.com%2Fsearch%2Fautocomplete%2Fhotel%3Fq%3Dmah%26token%3D90d2fad44172390b11527557e6250e50%26secretkey%3D83e2f0484edbd2ad6fc9888c1e30ea44%26output%3Djson',
    type     : 'GET',
    dataType : 'json'
}).done(function(data) {
    console.log(data.results.result[1].category); // Do whatever you want here
});

なぜ

XMLHttpRequestの同一生成元ポリシーが原因でこのエラーが発生します。これは基本的に、異なるポート、ドメイン、またはプロトコルを持つURLへのajaxリクエストの制限に要約されます。この制限は、クロスサイトスクリプティング（XSS）攻撃を防ぐために設けられています。

詳しくは

私たちのソリューションは、これらの問題をさまざまな方法で通過させます。

JSONPJSONを受信するために、スクリプトタグをJSON（javascript関数でラップ）にポイントする機能を使用します。JSONPページはjavascriptとして解釈され、実行されます。JSONは指定された関数に渡されます。

プロキシスクリプトは、実際にはページと同じオリジンのページを要求しているため、ブラウザをだまして機能します。実際のクロスオリジンリクエストはサーバー側で発生します。

于 2012-10-02T02:01:39.627 に答える
4

私はこれを（開発のために）単純なnginxプロキシで修正しました...

# /etc/nginx/sites-enabled/default
server {
  listen 80;
  root /path/to/Development/dir;
  index index.html;

  # from your example
  location /search {
    proxy_pass http://api.master18.tiket.com;
  }
}
于 2013-07-27T20:13:17.177 に答える
2

jQuery AJAXクロスドメインをよく読むと、クエリしているサーバーがクロスドメインjsonリクエストを禁止するヘッダー文字列を返していることがわかります。受信している応答のヘッダーをチェックして、Access-Control-Allow-Originヘッダーが設定されているかどうか、およびその値がローカルホストへのクロスドメイン要求を制限しているかどうかを確認します。

于 2012-10-02T02:00:17.850 に答える