# CORS policy configuration with React

**URL:** <https://meta.discourse.org/t/cors-policy-configuration-with-react/142065>\
**Category:** Support\
**Created:** [February 19, 2020, 10:53pm UTC](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065 "2020-02-19T22:53:01Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![codetricity](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codetricity/32/3773_2.png) [@codetricity](https://meta.discourse.org/u/codetricity)\
**Post date:** [February 19, 2020, 10:53pm UTC](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065/1 "2020-02-19T22:53:01Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/2/6/26434d0e3e15f9793a01fce7a834185099d6d366.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/9/a94fde8f16a310240cd784e97eed1f7ed4333ea6.png)

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/5/15f9fa591710a97000d0e09502f6587a9ce71217.png)

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

```javascript
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](https://global.discourse-cdn.com/meta/original/3X/2/2/22b0415d474a13c6d3df7d37f4c24990ad015ba1.png)

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](https://sea3.discourse-cdn.com/meta/images/transparent.png)

---

_[View the full topic](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065)._