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.