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.
