Unable to Connect to Elasticsearch using Searchkit

Question

I am starting out using the search kit and am trying to connect to a local instance of Elasticsearch version 5.2. There is already an index, mapping and data in the Elasticsearch instance and I could query for the data using Kibana.

When the page loads, the result is always 0 results found. I am not even sure if it manages to connect to the local instance successfully. The code is:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import{SearchkitManager,SearchkitProvider,SearchBox,Hits,HitsStats}    from "searchkit";

const searchkit = new SearchkitManager("http://localhost:9200");

ReactDOM.render((
    <SearchkitProvider searchkit={searchkit}>
        <div>
            <SearchBox searchOnChange={true} queryFields={["productName"]} queryOptions={{analyzer:"standard"}}/>
            <HitsStats translations={{
                "hitstats.results_found":"{hitCount} results found"
            }}/>
            <Hits hitsPerPage={5}/>
        </div>
    </SearchkitProvider>), document.getElementById('root'));

registerServiceWorker();

I am probably doing something wrong or missing something. Could anyone help with this?

Answer 1

All browsers have a default security policy enabled:

From Wipikedia:

the same-origin policy is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, hostname, and port number.

I imagine that you're serving your webpage using a local web server exposed on the 3000 port. So, when your ajax request to elasticsearch has an origin of http://localhost:3000 while your ES instance is exposed at http://localhost:9200.

You have many options to solve this.

Disable same origin policy in Chrome (only for development!)

You can follow this SO question to disabling same origin policy in Chrome.

Use a reverse proxy

You can configure a local reverse proxy (e.g. nginx) to serve your pages at localhost while exposing your ES instance at localhost/es. This is a simple nginx example to expose ES at localhost.

Proxy requests to ES from you app

If you're using a node based app to serve your pages, you can use the node-http-proxy to proxy request from your local path (e.g. localhost:3000/es) to your ES instance.

Enable CORS in your ES instance

Add these lines to your elasticsearch.yml configuration file:

http.cors.enabled: true 
http.cors.allow-origin: "http://localhost:3000" 

If you want to allow all Origins just replace the last configuration value with "*". See the documentation for more information.

Answer 2

Ok, just to share that the problem may have been found. I need to add 2 lines to the Elasticsearch yml file:

http.cors.enabled: true 
http.cors.allow-origin: "*" 

Answer 3

Try to set index and type

const searchkit = new SearchkitManager("http://localhost:9200/product-index/product");