CORS policy configuration with React

Support
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 Like
2

Hi @codetricity

Sorry you didn’t find a response to this post. I’m using React fetch and have gone through similar steps as the ones you mentioned above but it’s still blocking “by CORS policy.”

Please did you find a solution to this issue or a resource that explains the solution. Thanks!

3

hi, I can’t remember what I ended up doing. Though, I just checked and the React site is still up pulling the data from Discourse (on a separate server).

As using React with Discourse is common, I think someone else will be able to answer it. Sorry that I can’t remember the solution. Good luck.

1 Like
4

Hi
Thanks for the quick response! :slight_smile:

If you have a minute and access to the same code, would you please check if additional headers were added? (without the sensitive info itself…)

It says above the “No 'Access-Control-Allow-Origin' header is present” so I think additional headers should’ve been added?

Thanks in advance! :smiley: