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,




} from 'react-instantsearch-dom';

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

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

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

class ProductSearch  extends Component {  
        return (
              <SearchBox translations={{placeholder:"Search for a product"}} />
                <Content />

export default ProductSearch;

My console shows:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at*/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?

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

1 Like