Search Your Index from the Browser: CORS, Ajax and HTTP Auth

Search your index from the browser

Your web page can search your Opensolr Index straight from JavaScript, with no server of yours in between. Three things have to line up: your site is allowed to call the index, every request sends the login of the index, and the IP rules let your visitors in.

01 · Allow your site

Browsers only let a page read answers from a site that allows it. Send us the exact addresses of your site, as they appear in the browser bar (for example https://www.example.com and https://staging.example.com), and the name of your index: how to ask.

Until your site is on the list, the browser blocks the answer and the console shows a CORS error.

02 · Send the login

Every request sends the username and password of the index in an Authorization header. btoa() builds it from the two values. Host and index name are on the Info tab of the index: address and login.

With fetch:

const auth = 'Basic ' + btoa('opensolr:YOUR_INDEX_PASSWORD');

fetch('https://HOST/solr/INDEX/select?q=' + encodeURIComponent('laptop') + '&wt=json', {
    headers: { 'Authorization': auth }
})
    .then(r => r.json())
    .then(data => console.log(data.response.docs));

Long searches go better as a POST:

fetch('https://HOST/solr/INDEX/select', {
    method: 'POST',
    headers: {
        'Authorization': 'Basic ' + btoa('opensolr:YOUR_INDEX_PASSWORD'),
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({ q: 'laptop', wt: 'json', rows: '10' })
})
    .then(r => r.json())
    .then(data => console.log(data.response.docs));

With jQuery:

$.ajax({
    url: 'https://HOST/solr/INDEX/select',
    data: { q: 'laptop', wt: 'json' },
    headers: { 'Authorization': 'Basic ' + btoa('opensolr:YOUR_INDEX_PASSWORD') },
    dataType: 'json'
}).done(function (data) {
    console.log(data.response.docs);
});

Keep the login in the header. fetch refuses an address with the login written into it (https://user:pass@HOST/...).

03 · Let your visitors in

The request comes from each visitor's own address, so the part of the index your page calls has to be open to every address. Keep all on /select (and on /suggest or /mlt if your page uses them), and allow writes on /update only from your own servers: IP rules by handler.

04 · What your visitors can see

Anything in your page's JavaScript can be read by anyone who opens it, the login too. So:

• Give the index a password of its own. Never put your master API key in a web page.
• Allow /update only from your servers, so the login in the page can search and nothing else.
• For data that is not public, search from your own server instead, or use the hosted search page.

05 · When it does not work