带有机场 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 浏览器的控制台来判断这种情况。尝试从您的示例小提琴中搜索机场代码时，我在 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 标头 Access-Control-Allow-Origin）。 JSONP 或基于 iframe 的方法可以工作，但两者都有点老套，IMO。

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