CORS policy configuration with React

Soutien
1

I would like to access the Discourse API with React.

I get the following error:

localhost/:1 Access to XMLHttpRequest at 'https://community.oppkey.host/posts.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

image

This is my CORS origin settings using the Discourse admin panel.

image

On the Discourse server, I have the following in /var/discourse/containers/app.yml

image

This is how I am trying to get the Discourse API.

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("trying to get API on " + apiEndPoint);
		axios
        .get(apiEndPoint)
		.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})
		.catch((err) => console.log(err));
    }, []);

If I use an external server of fake data, the React code works.

image

I don’t understand how CORS and React work in general, so any help would be appreciated.

I have things working with an API proxy server I wrote to relay the API calls from my Discourse server to another REST API server that I’m using to connect to React. Although this works, it is slow. I would like to send API calls direct from React to the Discourse API endpoints.

image

1 « J'aime »
2

Salut @codetricity

Désolé que vous n’ayez pas trouvé de réponse à ce post. J’utilise React fetch et j’ai suivi des étapes similaires à celles que vous avez mentionnées ci-dessus, mais cela bloque toujours « par la politique CORS ».

S’il vous plaît, avez-vous trouvé une solution à ce problème ou une ressource qui explique la solution. Merci !

3

Salut, je ne me souviens plus de ce que j’ai fini par faire. Cependant, je viens de vérifier et le site React est toujours en ligne et récupère les données de Discourse (sur un serveur séparé).

Comme l’utilisation de React avec Discourse est courante, je pense que quelqu’un d’autre pourra y répondre. Désolé de ne pas me souvenir de la solution. Bonne chance.

1 « J'aime »
4

Salut
Merci pour la réponse rapide ! :slight_smile:

Si vous avez une minute et accès au même code, pourriez-vous vérifier si des en-têtes supplémentaires ont été ajoutés ? (sans les informations sensibles elles-mêmes…)

Il est indiqué au-dessus de “Aucun en-tête ‘Access-Control-Allow-Origin’ n’est présent”, donc je pense que des en-têtes supplémentaires auraient dû être ajoutés ?

Merci d’avance ! :smiley: