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!

Are you loading the page (not the ajax request) using the `file://` protocol? — Jason P, May 02 '14 at 14:26
First you don't want to be using `%QUERY` with prefetch, since it needs to return all the records. Second, try adding `ajax: $.ajax({type:'GET',dataType:'jsonp'})` to your `prefetch` object. — Ben Fortune, May 02 '14 at 14:33
No, the file is loaded using the http:// protocol. I have a form where i have an input with the class .country. When I start typing letters on that input I want to retrieve a list of suggestions which are held in the api. The API itself can be accessed using some authorization keys that are sent in headers. The question is how to set the headers in this case, since for example in a plain ajax query you would have the headers attribute. But in typeahead/bloodhound i didn't see this option, so I have no idea where I am supposed to include them. Hopefully this gives a bit more information. — R T, May 02 '14 at 14:33
@sirsince1990 The reason I ask is because if both the page and the ajax target url on are `http://localhost:80/`, you shouldn't have the CORS requirement. I was just trying to figure out why that was happening in the first place — Jason P, May 02 '14 at 14:43

Ozgur Susoy · Accepted Answer · 2014-05-24T11:15:12.970

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

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

1 Answers1