react app express server CORS request did not succeed - node.js

Question

I am trying to connect my front end to my back end, and I am using express server with node and react.
this is my fetch request fom front end: server runs on port 5000
const response = await axios.post("http://localhost:5000/send-email", {
to_email: data.data.email,
url: data.data.url,
});
console.log(response);
this resutls in:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/send-email. (Reason: CORS request did not succeed). Status code: (null).
I have in my back end:
app.post("/send-email", async (req, res) => {
try {
const { to_email, url } = req.body;
console.log(to_email, url);
await sendMail()
.then((result) => console.log("Email sent...", result))
.catch((error) => console.log(error.message));
res.send({ express: "YOUR EXPRESS BACKEND IS CONNECTED TO REACT" });
} catch (error) {
console.log(error);
res.status(500).json({ message: error });
}
});
I am also using core and also something like this:
// app.use(function (req, res, next) {
// // res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Origin", "http://localhost:3000");
// res.header(
// "Access-Control-Allow-Headers",
// "Origin, X-Requested-With, Content-Type, Accept"
// );
// res.header("Access-Control-Allow-Methods", "POST, OPTIONS");
// res.header("Access-Control-Allow-Credentials", true);
// next();
// });
but regards less I keep getting this error and I am not sure how to get rid of it. I have seen several solutions they are either old, and I have tried some of them, they dont work at all.

Answer 1

Install cors using (npm install cors).
In your backend code file, add
var cors = require('cors') <br />
app.use(cors())
Alternatively, follow instructions given at https://www.npmjs.com/package/cors.

Answer 2

I fixed it like the following:
in my front end, I have
const response = await axios.post("http://localhost:8000/signup", {
newUserNameEmail,
url,
});
console.log("response--> ", response.data);
and in my backend server:
const PORT = 8000;
const express = require("express");
const cors = require("cors");
const nodemailer = require("nodemailer");
const { google } = require("googleapis");
const app = express();
app.use(cors());
app.use(express.json());
//sign up
app.post("/signup", async (req, res) => {
try {
const { newUserNameEmail, url } = req.body;
console.log(newUserNameEmail, url);
await sendMail(newUserNameEmail, url)
.then((result) => console.log("Email sent...", result))
.catch((error) => console.log(error.message));
res.status(200).json({ newUserNameEmail, url });
} catch (error) {
console.log(error);
res.status(500).json({ message: error });
}
});
So for some reason, this works and doesn't generate the error I was getting before. I can now communicate with front end and backend and send data, and email.
But I have no idea why this worked and the other one didnt. I also didnt change my package.json

Answer 3

Add proxy in your package.json file to the port of your backend api
"proxy": "http://localhost:8000"
then change your url in the request to port 3000 or wherever your frontend is
const response = await axios.post("http://localhost:3000/send-email", {
to_email: data.data.email,
url: data.data.url,
});
console.log(response);
proxy only works in local, however your app and api usually share the same main domain so this cors error will not appear in production..