从本地服务器访问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件事。