ReactiveSearch, ES and CORS

Question

I plan on using AWS ES service to host my Elasticsearch. I setup a proxy as described here like so in Express server.

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

And it works. Setting up the proxy was pretty simple and straightforward. And its what ReactiveSearch recommends when using AWS ES. I can navigate to localhost:5000/search and see that ES is up and running (displays default welcome message).

However, when I start my React front-end(create-react-app) and try to submit a query I get this error

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.

I believe I have the settings right for ReactiveSearch for a local ES server in my React component:

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

Where query-index is my ES index and url is local ES server

I have these CORS settings for local ES instance

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

And then I believe I have the correct CORS setting setup for my Express server.

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

What am I doing wrong when it comes to the CORS settings. Is it the CORS route setup or CORS ES settings?

I plan to use AWS ES for production but I just want to do some testing locally first and can't seem to get the CORS setting right for React and ReactiveSearch.

Answer 1

Seems like in ES cors config you are using https with localhost, which might be creating error

http.cors.allow-origin: /https?://(localhost)?(127.0.0.1)?(:[0-9]+)?/

Also in your cors configuration for express app, Is localhost:3000 for frontend? If so, you are whitelisting frontend which might not be the case.

You can simply use app.use(cors()) before any route is declared and then use proxy for your search route as mentioned here, with a minor change,

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

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