web-dev-qa-db-ja.com

Origin http：// localhostは、Access-Control-Allow-Originでは許可されていません。

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

このコードでオフラインモード（これはメモ帳で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");}
        });

私のグーグルでchrome javascriptコンソール、次のようなエラーがあります： "XMLHttpRequestはロードできません http://api.master18.tiket.com/search/autocomplete/hotel？ q = mah＆token = 90d2fad44172390b11527557e6250e50＆secretkey = 83e2f0484edbd2ad6fc9888c1e30ea44＆output = json 。Origin（ http：// localhost ）はAccess-Control-Allow-Originでは許可されていません。

クロスドメインの問題であるに違いありません。誰か助けてもらえますか？ nb：コードの一部、スタックオーバーフローコミュニティから取得しました....ありがとう:)

jqueryajaxjsonapi
24
Gregorius Airlangga

次の2つの方法があります。

JSONP

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

プロキシスクリプト

クロスオリジンの問題を回避するために、Webサイトと同じドメインでプロキシスクリプトを作成できます。これは、HTTPS URLではなくHTTP URLでのみ機能しますが、必要な場合に変更するのはそれほど難しくないはずです。

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

詳細

これらの問題をさまざまな方法で解決します。

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

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

48
Nathaniel

私はこれを（開発用に）簡単な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;
  }
}
4
jmervine

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

2
Ben West