# 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:** 4
**Page:** 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)

---

<div class="post-metadata">

### Author: ![gassim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gassim/32/220910_2.png) [@gassim](https://meta.discourse.org/u/gassim)
#### Post date: [April 8, 2023, 8:08pm UTC](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065/2 "2023-04-08T20:08:32Z")

</div>

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!

---

<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: [April 8, 2023, 8:46pm UTC](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065/3 "2023-04-08T20:46:17Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![gassim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gassim/32/220910_2.png) [@gassim](https://meta.discourse.org/u/gassim)
#### Post date: [April 8, 2023, 10:23pm UTC](https://meta.discourse.org/t/cors-policy-configuration-with-react/142065/4 "2023-04-08T22:23:42Z")

</div>

Hi  
Thanks for the quick response! 🙂

> [@codetricity](#):
>
> ```plaintext
> .then((res) => {
> const currentData = res.data;
> updateData(currentData);
> console.log("got api");
> console.log(currentData);
> })
> 
> ```

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! 😃
