I attempted to use another nestjs project I had, to act as a second source of data, and display the result on a React page. If I replace http://localhost:6000/products, with an actual live api service, it works.
What am I doing wrong / what am I missing? (I have attempted to solve via cors, currently both the 5000 and 6000 are set to *)
Why would this work with an actual website with JSON data, and not at my 6000/products endpoint with JSON data. Any/All help greatly appreciated (I thought this would be a 30 second thing, that has amounted in multiple hours and headbashing)
import { useState, useEffect } from 'react';
import axios from 'axios';
import UserList from './components/UserList';
import NavBar from './components/NavBar';
function App() {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [price, setPrice] = useState('');
const [users, setUsers] = useState([]);
const [products, setProducts] = useState([]);
useEffect(() => {
async function proData() {
const response = await fetch('http://localhost:9090');
const data = await response.json();
setUsers(data);
}
proData();
async function loadData() {
const response = await fetch('http://localhost:6000/products');
const data = await response.json();
setProducts(data);
}
loadData();
}, []);
const handleSubmit = (event) => {
event.preventDefault();
axios
.post('http://localhost:6000/products', { title, description, price })
.then((response) => setProducts([...products, response.data]))
.catch((error) => console.error(error));
};
return (
<div>
<NavBar />
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(event) => setTitle(event.target.value)}
/>
<input
type="text"
value={description}
onChange={(event) => setDescription(event.target.value)}
/>
<input
type="text"
value={price}
onChange={(event) => setPrice(event.target.value)}
/>
<button type="submit">Create User</button>
</form>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.id}, {user.name}, ({user.email},{user.phone})
</li>
))}
</ul>
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
<UserList />
</div>
);
}
export default App;
Attempted to set additional local host for use in React app, via useEffect / useState. No matter what I try I cannot get it to load, though I can with actual live apis.
I could see the request hitting my other node services, triggering a console log of the data, so the request is being sent out and received and processed. It seems to be on the response / displaying end.
I know how it “should” work and I have looked for answers here and on google, but it seems specific.