I am trying to integrate an autocomplete field that gets its information using REST. I am using Typeahead/Bloodhound. I followed up the example from the documentation, but I can't find anywhere how to setup the headers, in order for this to work. For example this is the code:
var countries = new Bloodhound({
datumTokenizer: function(countries) {
return Bloodhound.tokenizers.whitespace(countries);
},
queryTokenizer: Bloodhound.tokenizers.whitespace
,
prefetch: {
url: "http://localhost/api-1.1/search/country/key/%QUERY",
filter: function(response) {
return response.countries;
}
}
});
// initialize the bloodhound suggestion engine
countries.initialize();
// instantiate the typeahead UI
$('.typeahead').typeahead(
{ hint: true,
highlight: true,
minLength: 1
},
{
name: 'country_label',
displayKey: function(countries) {
return countries.country.country_name;
},
source: countries.ttAdapter()
});
This is the response I get from the server in the console log:
XMLHttpRequest cannot load http://localhost/api-1.1/search/country/key/%QUERY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
Any suggestion would be much appreciated.
Thanks!
If everything you are using to construct the headers is synchronous, you can just pass a beforeSend
function in your ajax options. ie:
prefetch: {
url: "http://localhost/api-1.1/search/country/key/%QUERY",
filter: function(response) {
return response.countries;
},
ajax: {
beforeSend: function(jqXHR, settings) {
var authHeaders;
// pull apart jqXHR, set authHeaders to what it should be
jqXHR.setRequestHeader('Authorization', authHeaders);
}
}
}
just so there is no confusion, you are setting auth headers to gain access to the APIs, the APIs define Access-Control-Allow-Origin
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.