Je souhaite accéder à l’API Discourse avec React.
Je rencontre l’erreur suivante :
localhost/:1 L'accès à XMLHttpRequest à 'https://community.oppkey.host/posts.json' depuis l'origine 'http://localhost:3000' a été bloqué par la politique CORS : l'en-tête 'Access-Control-Allow-Origin' est absent de la ressource demandée.
Voici mes paramètres d’origine CORS configurés via le panneau d’administration de Discourse.
Sur le serveur Discourse, j’ai la configuration suivante dans /var/discourse/containers/app.yml :
Voici comment j’essaie d’appeler l’API Discourse.
export const DiscoursePanel = () => {
const [ allData, updateData ] = useState([]);
useEffect(() => {
const apiEndPoint = 'https://community.oppkey.host/posts.json';
/* const apiEndPoint = 'https://jsonplaceholder.typicode.com/posts'; */
console.log("tentative d'accès à l'API sur " + apiEndPoint);
axios
.get(apiEndPoint)
.then((res) => {
const currentData = res.data;
updateData(currentData);
console.log("API récupérée");
console.log(currentData);
})
.catch((err) => console.log(err));
}, []);
Si j’utilise un serveur externe fournissant de fausses données, le code React fonctionne.
Je ne comprends pas très bien le fonctionnement de CORS et de React en général, donc toute aide serait appréciée.
J’ai réussi à faire fonctionner les choses avec un serveur proxy API que j’ai écrit pour relayer les appels API de mon serveur Discourse vers un autre serveur REST API que j’utilise pour me connecter à React. Bien que cela fonctionne, c’est lent. Je souhaite envoyer les appels API directement depuis React vers les points de terminaison de l’API Discourse.
