Question

标题说明了一切。

我尝试在网址上使用远程源（位于另一个域上）并返回以下消息：

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。以下评论有更多信息。

编辑：我找到了解决办法！现在的问题就是解释为什么会这样。

所以当我将url更改为http://www....?callback=?时，实际上它将GET调用的响应加载为JSONP对象。 AJAX dataType和jsonp属性是否应涵盖此内容？

Answer 1

这有点陈旧但是自从提出这个问题后，用Twitter Typeahead完成jsonp的方法发生了变化，这个答案在搜索＆＃34; twitter typeahead jsonp＆＃34;

对typeahead中传输设置的任何更改都应该通过Bloodhound构造函数中的prepare函数完成。

var search = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.whitespace,
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            // `states` is an array of state names defined in "The Basics"
            //local: states,
            remote: {
                url: 'http://www.myserver.com/my_search_endpoint/SearchTerm=%searchValue',
                prepare: function(query, settings) {
                    settings.dataType = "jsonp"
                    settings.url = settings.url.replace('%searchValue', query)
                    return settings;
                }
            }
        });

prepare函数应该返回一个设置对象。有关详情，请参阅此处：https://github.com/twitter/typeahead.js/blob/master/doc/bloodhound.md#remote

您还需要确保在prepare函数中自己替换通配符值。

             remote: {
                url: 'http://www.myserver.com/my_search_endpoint/SearchTerm=%searchValue',
                wildcard: '%searchValue'
             }

指定prepare后，

将不再有效。

Answer 2

您可以使用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是一种替代解决方案，但您可能会认为这有点像黑客攻击。

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

2 个答案: