Network Error in react after deploy on heroku - node.js

Question

I deployed my MERN project on heroku app but when I tried to submit my form it send me this error in console:
Access to XMLHttpRequest at 'localhost:8000/api/products' from origin
'https://thebeuter.herokuapp.com' has been blocked by CORS policy:
Cross origin requests are only supported for protocol schemes: http,
data, chrome, chrome-extension, https. Form.jsx:69 Error: Network
Error
at e.exports (createError.js:16)
at XMLHttpRequest.d.onerror (xhr.js:83)
Here is my server.js:
const express = require("express"),
app = express(),
cors = require("cors"),
port = process.env.PORT || 8000,
db = "beuter",
path = require("path"),
server = app.listen(port, () => console.log(`Listening to on port ${port}`));
app.use(cors());
app.use(express.json());
if (process.env.NODE_ENV === "production") {
app.use(express.static('beuter/build'))
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'beuter', 'build', 'index.html'));
})
}
console.log(port)
require("./server/config/database.config")(db);
require("./server/routes/product.route")(app);
and here is my Form.jsx:
const addProduct = (e) => {
e.preventDefault();
const product = {
title,
title_url,
price,
description1,
description2,
description3,
description4,
description5,
img_url1,
img_url2,
img_url3,
img_url4,
size,
size2,
fit,
fit2,
category,
};
axios
.post("localhost:8000/api/products", product)
.then((res) => {
if (res.data.errors) {
setErrors(res.data.errors);
} else {
navigate("/");
}
})
.catch((err) => console.log(err));
};
return (
...
...
...
)
How can I fix this?
Here is my project github:
https://github.com/nathannewyen/the-beuter
Thank you!
Updated:
ShopAllProducts.jsx:
useEffect(() => {
const fetchItems = async () => {
setLoading(true);
const res = await axios.get("http://localhost:8000/api/products");
setProducts(res.data);
setLoading(false);
};
document.title = `Shop - The Beuter`;
fetchItems();
}, [props]);

Answer 1

the answer for this question is to have env files for development and production
for development
create the file called .env.development in the root folder of your frontend app
in .env.development add this line
REACT_APP_BASE_URL="http:localhost:5000"
and in .env.production add another line as
REACT_APP_BASE_URL="https://algorithammer.herokuapp.com"
or your website (here i am showing the sample)
now make sure that you have a variable called baseURL as global variable
example:
authAPI.js (example)
exports.baseURL = process.env.REACT_APP_BASE_URL;
in Login.js (example)
import {baseURL} from "./authAPI.js"
axios
.post(`${baseURL}/login`, {
data: "sample data"
})
.then((res) => console.log(res))
.catch((err) => console.log(err));
dont forget to push the changes and deploy the heroku app again