I've been building an inventory system using the MERN stack. However, when I attempt to view products with the code below, it always returns 'No Matching Product' even though there are matching products in my collection. The backend works fine when tested with Postman. What could be causing this issue and how can I resolve it?
const ViewProduct = () => {
const {prodID} = useParams()
const [product, setProduct] = useState(null);
const [isCalling, setIsCalling] = useState(false);
useEffect(() => {
const getProduct = async () => {
setIsCalling(true);
await axios.get('https://localhost:4000/api/products/',{params:prodID}
).then(response => {
setProduct(response.data)
}).catch(error => {
console.error(error);
})
setIsCalling(false);
};
getProduct();
}, [prodID]);
if (isCalling) {
return <div>Loading...</div>;
}
if (!product) {
return <div>No matching products</div>;
}
return (
<><div>
<h2>{product.name}</h2>
<p>Product ID: {prodID}</p>
<p>Description: {product.descr.join(', ')}</p>
<p>Type: {product.type}</p>
<p>Sub-type: {product.sub_type}</p>
<p>No of Stock Remaining: {product.noOfStockRemaining}</p>
<p>Archived: {product.archived ? 'Yes' : 'No'}</p>
<p>Archived On: {product.archived_on}</p>
<Button>Delete</Button>
<Button >Add Stock</Button>
<Button>Back To Inventory</Button>
</div>
</>
);
};
backend:
const getAProduct = async (req, res) => {
const { id } = req.params
//revisit ths validation after importing nanoid
if (!mongoose.Types.ObjectId.isValid(id)) {
return res.json({ error: 'no matching products' })
}
const product = await Product.findById(id)
if (!product) {
return res.json({ error: 'no matching products' })
}
res.json(product)
}
In addition, I have created a middleware that runs every time a request is sent so I can monitor the requests. When testing the backend with Postman, it shows that I'm sending a GET request, but nothing happens when trying to do it from the frontend.
app.use((req, res, next) =>{
console.log(req.path, req.method)
next()
})
Update: A certain error appears in the console
Cross-Origin Request Blocked: The Same Origin Policy prevents reading the remote resource at https://localhost:4000/api/products/. (Reason: CORS request did not succeed). Status code: (null)
I have already installed and configured CORS successfully, and it works for other requests. I also tried adding withCredentials:true to the axios parameters, but it still didn't work.
EDIT: There was a typo in the axios URL - I had typed 'https' instead of 'http' for localhost. Thank you everyone for your assistance.