pulling data from another domain, react and api platform - symfony - reactjs

Question

Working locally, I'm trying to pull some data from an api endpoint into a react front-end. Here's what I have:-
Data source/api endpoint (api platform, symfony)
http://127.0.0.1:8000/api/users?page=1
Front-end, React
http://127.0.0.1:3000/
/src/App.js
import React from 'react';
fetch('http://127.0.0.1:8000/api/users?page=1')
.then(response => console.log(response))
.then(json => console.log(json))
function App() {
return (
<div className="App">
</div>
);
}
export default App;
Firstly, I had to overcome a CORS issue with my data source. In symfony;-
.env
###> nelmio/cors-bundle ###
CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1)(:[0-9]+)?$'
###< nelmio/cors-bundle ###
As a side note; For my api endpoint (data source) - I can return the json response fine using both cURL and postman. However, if I try directly in a browser address bar, I just get my api landing page back i.e. swagger doc.
I'm wondering if this is an issue with headers not being set?
Back in my react app http://127.0.0.1:3000/ and at the console;-
my response is showing a 200 as you can see from above, but my json variable has a length of zero? So, no data.
Any ideas on how to pull the data (json) through to my react app using the above technique?

Answer 1

Here's what I was looking for in the end...
import React from 'react';
import { useEffect } from 'react'
function App() {
useEffect(() => {
fetch("http://127.0.0.1:8000/api/users?page=1")
.then((response) => response.json())
.then((response) => {
console.log(response);
})
}, []);
return (
<div className="App">
</div>
);
}
export default App;