Bonjour à tous je voudrait faire un moteur de recherche avec React mais j'ai l'erreur suivante dan la console :

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur http://essai/mr/fetch.php?q=p. Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. Code d’état : 200.

Sur une

J'adresse http://essai/mr/fetch.php est bien présente mais je ne sait pas comment configuré le  Access-Control-Allow-Origin .

Voici mon App.js

import React from 'react'
import Turnstone from 'turnstone'

const styles = {
  input: 'border p-2 bg-white w-full',
  listbox: 'border p-2 bg-white w-full'
}

// Set up listbox contents.
const listbox = {
  
  data: (query) =>
    fetch(`http://essai/mr/fetch.php?q=${encodeURIComponent(query)}`)
      .then(res => res.json())
}

export default function BasicExample() {
  return <Turnstone id="autocomplete" listbox={listbox} styles={styles} typeahead={false} />
}

Cela fonctionne avec l'adresse https://run.mocky.io/v3/aed33019-118c-406d-9562-55cbb69d85b2?q=

Cordialement

Bonjour, le serveur distant n'accepte pas la requête venant de ton origine.

Dans Javascript il n'y a rien à configuré.

Soit le serveur distant t'appartient et il faut que tu configure le CORS de ton application serveur pour autoriser ton client à effectuer des requêtes dessus.

Soit le serveur ne t'appartient pas et tu ne peux pas effectuer de requête dessus depuis un client.