javascript - 带有机场 IATA 代码的 Bootstrap Typeahead

Question

我正在尝试使用 Bootstrap 3's Typeahead script自动填充机场查询。

这是我尝试使用的网络服务: http://airportcode.riobard.com/about#about

我已经修改了另一个工作的 jsfiddle(原来的工作源和数组键被注释掉并替换为新的)

// instantiate the bloodhound suggestion engine
var airports = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        //url: 'http://api.themoviedb.org/3/search/movie?query=%QUERY&api_key=470fd2ec8853e25d2f8d86f685d2270e',
        url: 'http://airportcode.riobard.com/search?q=%QUERY&fmt=JSON',
        filter: function (airports) {
            return $.map(airports.results, function (airport) {
                return {
                    //value: airport.title
                    value: airport.name
                };
            });
        }
    }
});

// initialize the bloodhound suggestion engine
airports.initialize();

// instantiate the typeahead UI
$('.typeahead').typeahead(null, {
    name: 'airports',
    displayKey: 'value',
    source: airports.ttAdapter()
});

http://jsfiddle.net/UkB7u/109/

不确定为什么它不工作，据我所知它应该按原样工作但它不工作。

Answer 1

它不工作的原因是因为 same-origin policy ，这是当今所有主要浏览器都实现的一种安全策略，可防止浏览器向托管在不同域上的服务发出请求。您可以通过查看 Web 浏览器的控制台来判断情况是否如此。当我尝试从您的示例 fiddle 中搜索机场代码时，我在 Chrome 的开发人员工具中看到了这个错误:

XMLHttpRequest cannot load http://airportcode.riobard.com/search?q=ORD&fmt=JSON. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access. 

请注意，原始域是 fiddle.jshell.net，而您尝试访问的服务位于 airportcode.riobard.com 域中。由于同源策略，你将无法在不跳过一些环节的情况下从一个到另一个发出请求。

要更深入地解释为什么首先存在同源策略以及为什么它如此重要，请在此处查看答案:

https://security.stackexchange.com/questions/8264/why-is-the-same-origin-policy-so-important

有关如何规避同源策略的一些想法，请阅读此处:

Ways to circumvent the same-origin policy

我可以说，如果没有 airportcode.riobard.com 的一些合作，CORS 将无法工作(它要求服务器的响应包含特定的 HTTP header ，Access-Control-允许来源)。 JSONP 或基于 iframe 的方法可以工作，但在我看来，这两种方法都有些老套。

解决此问题的最简单方法是在您自己的服务器上创建一个“代理”。也就是说，您不是通过 JavaScript 代码与此外部服务通信，而是向您自己的服务器发出 HTTP 调用并让它从远程服务器获取数据。这是可行的，因为在您的 Web 服务器上运行的代码不受同源策略限制 - 只有客户端代码受限制。