1

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?

Clement
  • 29
  • 4
  • Do you see any message in your browser console? Do you see any log in your elasticsearch instance? – lifeisfoo Sep 03 '17 at 14:50
  • Hi lifeisfoo, I checked the chrome developer console and there is this message: XMLHttpRequest cannot load http://localhost:9200/_search. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. There were no logs about any queries in the Elasticsearch logs Could I know what is this error about? All the while when I used Kibana and Elasticsearch, there was no access error. – Clement Sep 03 '17 at 15:12
  • Ok, just to share that the problem may have been found. I need to add 2 lines to the Elasticsearch cml file: http.cors.enabled: true http.cors.allow-origin: "*" – Clement Sep 03 '17 at 15:35

3 Answers3

1

Try to set index and type

const searchkit = new SearchkitManager("http://localhost:9200/product-index/product");
Denis P.
  • 192
  • 1
  • 7
0

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: "*"
Clement
  • 29
  • 4
0

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.

lifeisfoo
  • 12,017
  • 4
  • 59
  • 102