CORS error when using elasticsearch.js

Question

I am trying to test an index from my local machine. I created a simple HTML page with a query box that sends the query to ES using the elasticsearch.js client. Both the index and the browser are on my desktop, so there shouldn't be a cross origin problem, but I keep getting an error that states:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/portal/book/_search?q=title%3Ahistoire. This can be fixed by moving the resource to the same domain or enabling CORS.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/. This can be fixed by moving the resource to the same domain or enabling CORS.

I tried enabling CORS, but get the same error. Here are the index's settings:

{
    "portal": {
        "settings": {
            "index": {
                "creation_date": "1421788614558",
                "uuid": "jg-iHjnSTDGHODY0_x4Ysw",
                "number_of_replicas": "1",
                "http": {
                    "cors": {
                        "enabled": "true",
                        "allow-origin": "/(http://)?localhost(:[0-9]+)?/"
                    }
                },
                "number_of_shards": "5",
                "version": {
                    "created": "1040299"
                }
            }
        }
    }
}

index.html

<!DOCTYPE html >
<html ng-app="portal">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">

        <script src="bower_components/angular/angular.min.js"></script>
        <script src="bower_components/elasticsearch/elasticsearch.min.js"></script>

        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
    </head>

    <body ng-controller="SearchCtrl">
        <div class="container-fluid">
            <div class="row-fluid">
                <span class="span3">
                    <input class="input-block-level" ng-model="queryTerm" type="text">
                </span>&nbsp;
                <button ng-click="search()" class="btn" type="button">Search</button>
            </div>

            <div class="row-fluid">
                Found {{ results.hits.total }}
                <div class="span4">
                    <li ng-repeat="doc in results.hits.hits">
                        {{ doc._source.title }}
                    </li>
                </div>
            </div>
        </div>
    </body>
</html>

app.js

angular.module('portal', [
    'controllers',
]);

var client = new elasticsearch.Client({
    host: 'http://localhost:9200',
    apiVersion: '1.3',

});

controller.js

angular.module('controllers', []).controller('SearchCtrl',
    function($scope) {

        $scope.search = function(query) {
            $scope.results = client.search({
                    index: 'portal',
                    type: 'book',
                    q: 'title:' + $scope.queryTerm
                }, function (error, response) {console.log('could not execute query!')}
            );
        };
    }
);

Is the client side and backend on the same domains?

Krishna
– Krishna

2015-01-23 04:54:26 +00:00
Commented Jan 23, 2015 at 4:54 — Krishna
– Krishna, Commented Jan 23, 2015 at 4:54
Yes, I'm running both on my desktop.

Joshua Gomez
– Joshua Gomez

2015-01-23 17:10:00 +00:00
Commented Jan 23, 2015 at 17:10 — Joshua Gomez
– Joshua Gomez, Commented Jan 23, 2015 at 17:10
Does the elasticsearch.js client add any custom headers?

Angelo R.
– Angelo R.

2015-02-09 20:54:53 +00:00
Commented Feb 9, 2015 at 20:54 — Angelo R.
– Angelo R., Commented Feb 9, 2015 at 20:54

we_are_unlimited · Accepted Answer · 2020-12-15 15:40:13Z

3

Add following line to your config yml file

http.cors.enabled : true
http.cors.allow-origin: "*"
http.cors.allow-methods: OPTIONS, HEAD, GET, POST, PUT, DELETE
http.cors.allow-headers: X-Requested-With,X-Auth-Token,Content-Type,Content-Length
http.cors.allow-credentials: true

and kill elastic search java process on unix based system like is demonstrated on this topic response https://stackoverflow.com/a/41644614/11079315

answered Dec 15, 2020 at 15:40

we_are_unlimited

311 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Foobie Bletch · Accepted Answer · 2015-02-11 15:39:05Z

2

I don't know why you are getting a cross domain error to begin with. Are you opening your front end as file://.... ? Totally random guess and not sure it matters. If you are and want to run your UI through a web server, you can open a terminal, cd into that dir and run 'python -m SimpleHTTPServer 7000'. Now your UI is running on localhost:7000.

For CORS settings, see http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/modules-http.html and, if you are using Chrome, http://www.williamjohnbert.com/2013/06/allow-cors-with-localhost-in-chrome/ might help.

In your config you should at least set 'http.cors.enabled: true' and 'http.cors.allow-credentials: true'. The other defaults should be sensible. You may also want to modify the 'http.cors.max-age' setting in case old settings are cached.

Use the js console, net tab in your browser to see what headers you are getting back.

answered Feb 11, 2015 at 15:39

Foobie Bletch

3002 silver badges8 bronze badges

1 Comment

Emad Rahnama Over a year ago

I added 'http.cors.enabled: true' and 'http.cors.allow-credentials: true' to my elasticsearch.yml and that's works. thank you.

Collectives™ on Stack Overflow

CORS error when using elasticsearch.js

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related