CORS policy configuration with React

[codetricity (Craig Oda)]

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.

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

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

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.

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.

[gassim (Al-Gassim Sharaf Addin)]

Ciao @codetricity

Mi dispiace che tu non abbia trovato una risposta a questo post. Sto usando React fetch e ho seguito passaggi simili a quelli che hai menzionato sopra, ma continua a bloccare “a causa della policy CORS”.

Per favore, hai trovato una soluzione a questo problema o una risorsa che spieghi la soluzione. Grazie!

[codetricity (Craig Oda)]

Ciao, non riesco a ricordare cosa ho finito per fare. Tuttavia, ho appena controllato e il sito React è ancora attivo e recupera i dati da Discourse (su un server separato).

Dato che l’uso di React con Discourse è comune, penso che qualcun altro sarà in grado di rispondere. Mi dispiace di non ricordare la soluzione. Buona fortuna.

[gassim (Al-Gassim Sharaf Addin)]

Ciao
Grazie per la rapida risposta!

@codetricity

.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})

Se hai un minuto e accesso allo stesso codice, potresti verificare se sono state aggiunte intestazioni aggiuntive? (senza le informazioni sensibili stesse…)

Dice sopra “Nessuna intestazione ‘Access-Control-Allow-Origin’ presente”, quindi penso che dovrebbero essere state aggiunte intestazioni aggiuntive?

Grazie in anticipo!