2017-03-26 8 views
2

私はこのlinkからairbnb apiを使用しようとしています。私はそれが公式APIではないことを知っていますが、私は実際に私のウェブサイトでそれを使用する必要があります。しかし、 CORS(クロスオリジンリソース共有)エラーが発生し、APIを呼び出せません。私がhurl.itから試みたとき、それは絶対にうまくいっていました。しかし、今私はどのようにこれを修正するか分からないのですか?私はバックエンド上のルビーとjquery ajaxを使ってapiを呼び出しています。私のajaxコードコールは以下の通りです。私はこのコードからairbnbのホストとして空リストを作成しています。私は本当にこれを行う必要があります。 airbnb apiを使用する他の解決策がある場合は、提案してください。あなたの助けに感謝。どうもありがとうございました。airbnb apiの呼び出し中にエラーが発生しました

$("#submit_apartments").on("click", function() { 
    $.ajax({ 
    type: "POST", 
    url: "https://api.airbnb.com/v1/listings/create?client_id=3092nxybyb0otqw18e8nh5nty", 
    headers: { 
     "Content-Type": "application/json; charset=UTF-8", 
     "X-Airbnb-OAuth-Token": "myAuthToken" 
    }, 
    data: { 
     room_type_category: "private_room", 
     property_type_id: 2, 
     bathrooms: 1, 
     person_capacity: 1, 
     beds: 1, 
     bedrooms: 1, 
     city: "Sunnyvale, California, US" 
    }, 
    success: function() { 
    console.log("Sucess"); 
    }, 
    error: function(xhr,err){ 
     console.log("Error!!!"); 
    } 
    }); 
}); 

答えて

2

Webアプリケーションでクライアント側のJavaScriptからAirbnbのAPIを使用するには、https://github.com/cyu/rack-corsまたは類似のコードを使用して、独自のCORSプロキシを設定する必要がありますいずれか、またはあなたが開いてリクエストを送信することができますこのようhttps://cors-anywhere.herokuapp.com/としてCORSプロキシ:

$.ajax({ 
    type: "POST", 
    url: "https://cors-anywhere.herokuapp.com/https://api.airbnb.com/v1/listings/create?client_id=3092nxybyb0otqw18e8nh5nty", 
    … 
} 

CORSプロキシがAirbnbのAPIエンドポイントに要求を送信し、それがAirbnbからの応答を取得する場合、その後、それがAccess-Control-Allow-Originレスポンスヘッダとすべての他の必要なCORSヘッダを追加しますそれはブラウザに渡され、ブラウザには表示されます。

ただし、アクセストークンがX-Airbnb-OAuth-Tokenのログイン済みエンドポイントにリクエストを送信するために、サードパーティのオープンプロキシを使用したくない場合があることに注意してください。プロキシの所有者がX-Airbnb-OAuth-Token値を入力して再利用してください。

実際には、代わりにhttps://github.com/cyu/rack-corsなどを使用して独自のプロキシを設定する必要があります。

Airbnb API自体がCORSプロトコルで要求されているAccess-Control-Allow-Originレスポンスヘッダーを送信しないため、そのようなプロキシを介してリクエストを行うことが有効な唯一の方法です。また、 JSONP形式の応答を取得できるようにコールバック名を指定することができます。

これは、Webアプリケーションで実行されているクライアント側のJavaScriptから直接Airbnb APIを呼び出す方法がないことを意味します。ブラウザがクライアント側のJSコードで応答にまったくアクセスできないためです。

、それを確認し、そのAPI用の任意のエンドポイントのURLにリクエストを試してみて、応答ヘッダを見て:あなたが戻って取得します

curl -i -H "Origin: http://example.com" \ 
    "https://api.airbnb.com/v2/search_results?client_id=3092nxybyb0otqw18e8nh5nty" 

レスポンスヘッダ:

HTTP/1.1 200 OK 
Server: nginx/1.7.12 
Content-Type: application/json; charset=utf-8 
Status: 200 OK 
Content-Security-Policy: default-src 'self' https:; connect-src 'self' https: ws://localhost.airbnb.com:8888 http:; font-src 'self' data: *.muscache.com fonts.gstatic.com use.typekit.net; frame-src *; img-src 'self' https: http: data:; media-src 'self' https:; object-src 'self' https:; script-src 'self' https: 'unsafe-eval' 'unsafe-inline' http:; style-src 'self' https: 'unsafe-inline' http:; report-uri /tracking/csp?action=index&controller=v2&req_uuid=cd9b2eb5-5014-4587-8f6b-144c800b6d7b&version=b11f4837d2aaab4f25311eaabfd788770abc5557; 
X-Content-Type-Options: nosniff 
X-XSS-Protection: 1; mode=block 
X-Frame-Options: SAMEORIGIN 
Cache-Control: no-store, max-age=0, private, must-revalidate 
ETag: W/"1dc7df77adc42a864c6a7a6806a68a6f" 
X-UA-Compatible: IE=Edge,chrome=1 
Strict-Transport-Security: max-age=10886400; includeSubdomains 
Date: Sun, 26 Mar 2017 03:31:08 GMT 
Transfer-Encoding: chunked 
Connection: keep-alive 
Connection: Transfer-Encoding 

お知らせなしにはありますが応答ヘッダーがAccess-Control-Allow-Originにあります。


https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORSさらにCORS情報があります。

関連する問題