React Instantsearch CORS error

Trying Algolia for the first time and am a novice. I am trying to add React Instantsearch to my site and it appears like I am properly sending requests to Algolia, but unable to receive responses due to CORS error.

   import React, { Component } from 'react';

import algoliasearch from 'algoliasearch/lite';

import {InstantSearch,

SearchBox,

Hits,

Configure,

} from 'react-instantsearch-dom';

const searchClient = algoliasearch('...', '...');

const Hit = ({hit}) => 
    <div className="hit">
        <div className="hit-name">
            <h1>{hit.name}</h1>
        </div>
    </div>

const Content = () => 
    <div className="content">
        <Hits hitComponent={Hit} />
    </div>

class ProductSearch  extends Component {  
    
      render(){
        return (
            <InstantSearch
            searchClient={searchClient}
            indexName="products"
          >
          <header>
              <SearchBox translations={{placeholder:"Search for a product"}} />
          </header>
            <main>
                <Content />
            </main>
          </InstantSearch>
        
          );

      }
       
}
export default ProductSearch;

My console shows:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://y609ox67vao-1.algolianet.com/1/indexes/*/queries?x-algolia-agent=Algolia%20for%20JavaScript%20(4.5.1)%3B%20Browser%20(lite)%3B%20JS%20Helper%20(3.2.2)%3B%20react%20(17.0.1)%3B%20react-instantsearch%20(6.8.2)&x-algolia-api-key=a45ba7a230d2dc139f1311d59f8bc56a&x-algolia-application-id=Y609OX67VAO. (Reason: CORS request did not succeed).

This same error occurs with Firefox, Chrome, and Safari.

I’ve tried this to be sure, but I don’t get a CORS error (as expected), is there anything about your site which is different than this? https://codesandbox.io/s/agitated-firefly-7b8kx?file=/src/App.js

Could you try to make this reproducible on GitHub or codesandbox?

1 Like