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

5 réponses


Hello :)

Alors le problème ne vient pas de ton coté, mais du coté de http://essai/mr/fetch.php qui doit autoriser le fettch en ajoutant

Access-Control-Allow-Origin: TON_SITE_QUI_FAIT_LE_FETCH

Merci de ton aide,
Je suis en local ppur le moment, donc je met
Access-Control-Allow-Origin: http://localhost:3000/

au php de l'adresse http://essai/mr/fetch.php ?

yep c'est ça et après ça devrait passer et l'autorisation faut pas le mettre dans localhost mais dans le site essai

Grafikart a fait un tutoriel pour comprendre CORS : https://grafikart.fr/tutoriels/cors-http-navigateur-1180

Merci, ca à l'ai d'estre réglé mais mon moteur de recherche fonctionne toujours pas. Il y a donc une autre erreur !