從本地服務器訪問API

Question

我正在嘗試從本地Wamp服務器調用CTA API（ http://www.transitchicago.com/developers/bustracker.aspx ）。 但是，通過骨干收集進行提取時，我得到：

XMLHttpRequest cannot load http://www.ctabustracker.com/bustime/api/v1/getroutes?key=xx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

采集：

define([
'models/route',
'core'
], function (Route) {

return Backbone.Collection.extend({

    initialize: function () {},

    model: Route,

    //url: function () {
    //  return 'http://www.ctabustracker.com/bustime/api/v1/getroutes?key=xx';
    //},

    url: function () {
        return '/apiproxy.php?method=getroutes';
    },

 });

});

我知道這是一個常見問題，但尚未找到一個簡明的答案。

我該如何解決這個問題？ 更新添加了apiproxy，但正在收到此響應：

Remote Address:127.0.0.1:80
Request URL:http://localhost/apiproxy.php?method=getroutes
Request Method:GET
Status Code:200 OK
Request Headersview parsed
GET /apiproxy.php?method=getroutes HTTP/1.1

安慰：

responseText: "$url = "http://www.ctabustracker.com/bustime/api/v1/{$_GET['method']}?   key=xx";
↵echo file_get_contents($url);

SyntaxError {stack: (...), message: "Unexpected token $"}
message: "Unexpected token $"
stack: (...)

Answer 1

您可以解決此問題，但這不是“將這一行添加到JavaScript中，一切都會好的”的簡單情況。

您正在使用每個Web瀏覽器中內置的同源安全策略 。 “來源”基本上是指“同一站點”； 我在example.com上的JavaScript可以訪問在example.com上喜歡的任何內容，但是不允許從demo.com，example.net或api.example.com讀取任何內容。 那有不同的起源。 這是一張算作同一原產地的表 。

沒有它，我可能會寫一個網頁來竊取您所有的gmail和私人Facebook照片。 我的惡意JavaScript會向gmail.com和facebook.com發出Web請求，找到指向您的電子郵件和照片的鏈接，也加載該數據，然后將其發送到我自己的服務器上。

顯然，某些網頁被設計為供其他人使用。 例如，API通常希望允許訪問其數據，以便人們可以構建Web應用程序。 構建這些API的人員可以使用Access-Control-標頭提供其內容，該標頭告訴瀏覽器可以接受來自其他站點的請求。 這稱為CORS-跨域資源共享。 您收到該錯誤消息的原因是因為ctabustracker.com開發人員未添加任何CORS標頭。 因此，您無法從JavaScript訪問其API。

---

那么解決方案是什么？ 您有兩種選擇：

1. 給ctabustracker.com管理員發送電子郵件，並要求他們添加CORS標頭以允許來自其他域的訪問。 這是最不適合您的工作，但是您受其開發團隊的知識，基礎架構和及時性的支配。
2. 編寫自己的代理服務器。

同源策略僅會妨礙您使用JavaScript。 您可以在服務器上做任何您想做的事； 最簡單的說，您可以按照以下方式創建apiproxy.php ：

$allExceptMethod = $_GET; // PHP arrays are copy-by-value
unset($allExceptMethod['method']);
$url = "http://www.ctabustracker.com/bustime/api/v1/{$_GET['method']}?key=xx&" . http_build_query($allExceptMethod);
echo file_get_contents($url);

然后從您的JavaScript中以/apiproxy.php?method=getroutes對其進行訪問，並通過標准查詢字符串傳入其他參數（例如，/ /apiproxy.php?method=test&foo=bar&cat=dog導致對http://www.ctabustracker.com/bustime/api/v1/test?key=xx&foo=bar&cat=dog的請求http://www.ctabustracker.com/bustime/api/v1/test?key=xx&foo=bar&cat=dog ）。 現在，您的JavaScript向您自己的服務器發出請求，因此同源策略不會有任何問題。

當然，您可以根據需要使代理變得聰明。 它可以緩存響應，將XM​​L轉換為JSON，為可能的下一個請求預取結果，或對您的應用有用的100件事。