How to set up 'Access-Control-Allow-Origin' headers with Typeahead / Bloodhound?

Question

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!

Answer 1

If everything you are using to construct the headers is synchronous, you can just pass a beforeSend function in your ajax options. i.e.:

    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