2017-03-26 37 views
2

我一直在嘗試使用airbnb api從這個link。我知道這不是官方的api,但我真的需要在我的網站中使用它。但我得到 CORS(跨源資源共享)錯誤,我不能調用api。當我嘗試從hurl.it它工作得很好。但是現在我不確定我該如何解決這個問題?我在後端使用ruby和jquery ajax來調用api。我的ajax代碼調用如下。我從這段代碼創建一個空白列表作爲airbnb中的主機。我真的需要這樣做。如果有任何其他解決方案使用airbnb API,那麼請建議。感謝你的幫助。非常感謝你。cors錯誤,同時調用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

要使用來自客戶端的JavaScript API的Airbnb在一個Web應用程序,你要麼需要從https://github.com/cyu/rack-cors或類似的設置使用代碼自己CORS代理,或者您也可以通過一個開放的發送請求CORS代理如https://cors-anywhere.herokuapp.com/

$.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代碼訪問響應。

要確認,嘗試任何端點URL的請求,它的API,並期待在響應頭:

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信息。