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)]

Olá @codetricity

Desculpe por você não ter encontrado uma resposta para esta postagem. Estou usando o React fetch e passei por etapas semelhantes às que você mencionou acima, mas ainda está bloqueando “pela política CORS”.

Por favor, você encontrou uma solução para este problema ou um recurso que explique a solução. Obrigado!

[codetricity (Craig Oda)]

Olá, não consigo me lembrar do que acabei fazendo. No entanto, acabei de verificar e o site React ainda está ativo, buscando dados do Discourse (em um servidor separado).

Como usar React com Discourse é comum, acho que outra pessoa poderá responder. Desculpe por não me lembrar da solução. Boa sorte.

[gassim (Al-Gassim Sharaf Addin)]

Olá
Obrigado pela resposta rápida!

@codetricity

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

Se você tiver um minuto e acesso ao mesmo código, poderia verificar se cabeçalhos adicionais foram adicionados? (sem as informações confidenciais em si…)

Diz acima do “No 'Access-Control-Allow-Origin' header is present” então acho que cabeçalhos adicionais deveriam ter sido adicionados?

Obrigado desde já!