如何将Typeahead.js建议绑定到跨域数据源？

Question

标题说明了一切.

我尝试在url上使用远程源(在另一个域上)并返回以下消息:

XMLHttpRequest cannot load
http://www..../argument?callback=urlHandler. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:5000' is therefore not allowed
access.

相关守则

var films = new Bloodhound({
  datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },
  queryTokenizer: Bloodhound.tokenizers.whitespace,
  remote: {url: "http://www..../%QUERY?callback=urlHandler",
           ajax: $.ajax({type:'GET',dataType:'jsonp',jsonp:'jsonp'})                                    
  }
});

更新:似乎问题出在CORS问题上.并且不遵守$.ajax设置对象的dataType设置为jsonp.以下评论有更多信息.

编辑:我找到了修复!现在的问题就是解释为什么会这样.

因此,当我更改http://www....?callback=?实际使其加载GET调用的响应作为JSONP对象的url时.AJAX dataType和jsonp属性不应该涵盖这个吗？

Answer 1

您可以使用 XMLHttpRequest 对象发出跨域请求。这是通过使用“跨源资源共享”来完成的。请参阅： http: //en.wikipedia.org/wiki/Cross-origin_resource_sharing

简而言之，当向服务器发出请求时，服务器可以使用 Access-Control-Allow-Origin 标头进行响应，该标头将允许或拒绝该请求。浏览器需要检查此标头，如果允许，则它将继续请求过程。如果不是，浏览器将取消请求。

您可以在这里找到更多信息和工作示例：http://www.leggetter.co.uk/2010/03/12/making-cross-domain-javascript-requests-using-xmlhttprequest-or-xdomainrequest.html

JSONP 是一种替代解决方案，但您可能会认为它有点像黑客。