elasticsearch - 无法使用Searchkit连接到Elasticsearch

Question

我开始使用搜索工具包，并尝试连接到Elasticsearch 5.2版的本地实例。 Elasticsearch实例中已经有一个索引，映射和数据，我可以使用Kibana查询数据。

页面加载时，结果始终为0。我什至不确定它是否能够成功连接到本地实例。代码是:

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();

我可能做错了什么或缺少了什么。有人可以帮忙吗？

Answer 1

所有浏览器均启用了默认安全策略:

从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.

我想您正在使用 3000端口上公开的本地Web服务器来提供网页。因此，当您对Elasticsearch的ajax请求的起源是 http://localhost:3000，而ES实例暴露在 http://localhost:9200时。

您有很多解决方案。

在Chrome中禁用同一来源政策(仅用于开发!)

您可以将这个SO问题关注到 disabling same origin policy in Chrome。

使用反向代理

您可以配置本地反向代理(例如nginx)以在 localhost上提供页面，而在 localhost/es上公开ES实例。这是一个简单的 nginx example to expose ES at localhost。

您的应用向ES的代理请求

如果您使用的是基于节点的应用来提供页面服务，则可以使用 node-http-proxy将请求从本地路径(例如 localhost:3000/es)代理到ES实例。

在您的ES实例中启用CORS

将这些行添加到 elasticsearch.yml配置文件中:

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

如果要允许所有Origins，只需将最后一个配置值替换为 "*"。参见 documentation for more information。