Reactivesearch not getting data from elasticsearch on localserver

Question

I am building an app using Django, React and ElasticSearch. The data is sent from Django models to elasticsearch on localhost and I want to use Reactivesearch to display my search results. I have the following component according to the documentation:

export default function LandingPage(){


    return (
      <ReactiveBase
      url="http://localhost:9200"
      app="entries"
      credentials="AUTH_CREDENTIALS"
      headers={{
        secret: 'reactivesearch-is-awesome'
    }}
>
    <SearchBox 
        componentId="SearchBoxSensor" 
        dataField={[{
          'field': 'title',
          'weight': 1
        }, 
        {
          'field': 'body',
          'weight': 2
        }
        ]} 
    />

      {/* Our components will go over here */}
      Hello from ReactiveSrch 
    </ReactiveBase>
    )
}

in elasticsearch.yaml:

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, Authorization, Access-Control-Allow-Headers, Accept
http.cors.allow-credentials: true

I found that Reactive search doesn't access the elasticSearch data and I find this in my console

I have tried to change http.cors.allow-origin: '*' in elasticsearch.yaml to http.cors.allow-origin: /https?:\/\/(localhost)?(127.0.0.1)?(:[0-9]+)?/ according to what I have found in this question

Also I have tried to test the API using fetch outside ReactiveSearch component and It worked and data is displayed to me.

So how can I access my elasticsearch data using Reactivesearch on my localserver?