ReactiveSearch、ES和CORS

Question

我计划使用AWS服务来托管我的Elasticsearch。我设置了一个代理，就像在速成服务器中描述的这里一样。

var proxy = require('express-http-proxy');
...
app.use('/', index);
app.use('/users', users);
app.use('/search', proxy('localhost:9200'));

而且它是有效的。设置代理非常简单和简单。这也是ReactiveSearch在使用AWS时所建议的。我可以导航到localhost:5000/search，并看到ES已经启动并运行(显示默认欢迎消息)。

但是，当我启动get前端(create- React app)并尝试提交一个查询时，我会得到以下错误：

Failed to load http://localhost:9200/query-index/_msearch?: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

我相信我的React组件中有本地ES服务器的ReactiveSearch设置：

<ReactiveBase
              app="query-index"
              url="http://localhost:9200"
              >

其中，查询索引是我的ES索引，url是本地ES服务器。

我为本地ES实例设置了这些CORS设置。

http.cors.enabled: true
http.cors.allow-credentials: true
# http.cors.allow-origin: "http://localhost:3000"
# http.cors.allow-origin: /https?:\/\/localhost(:[0-9]+)?/
http.cors.allow-origin: /https?:\/\/(localhost)?(127.0.0.1)?(:[0-9]+)?/
# #http.cors.allow.origin: "*" # this does not work with ReactiveBase
# #http.cors.allow-origin: /https?:\/\/(www.)?elastic.co/
# http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers: X-Requested-With, Content-Type, Content-Length, Authorization, Accept

然后我相信我已经为我的Express服务器设置了正确的CORS设置。

var cors = require('cors');
...
var corsOptions = {
  origin: 'http://localhost:9200',
  optionsSuccessStatus: 200
};
...
app.options('/search', cors()); //should enable pre-flight for search routes
app.use('/search', cors(corsOptions), function(req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Length, Content-Type, Authorization, Accept');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
});

当涉及到CORS设置时我做错了什么。是CORS路由设置还是CORS ES设置？

我计划在生产中使用AWS，但我只想先在本地进行一些测试，似乎无法使CORS设置正确的React和ReactiveSearch。

Answer 1

在ES cors配置中，您使用的是带有localhost的https，这可能会造成错误。

来源: /https?://(localhost)?(127.0.0.1)?(:0-9+)?/

此外，在您的cors配置的快递应用，localhost:3000是前端吗？如果是这样的话，您是在白名单正面，这可能不是这样的。

您可以简单地在声明任何路由之前使用app.use(cors())，然后使用代理进行搜索，就像这里提到的那样，只需做一点小小的更改，

app.use('/search', proxy(options));

https://github.com/appbaseio-apps/reactivesearch-proxy-server/blob/master/index.js#L46