I built a tiny api to help me send emails from my front end to my gmail inbox.
I have installed cors, express and dotenv as dependencies to build this api.
<code>const express = require("express");
const emailjs = require("@emailjs/browser");
const cors = require("cors");
require("dotenv").config({
const PORT = process.env.PORT;
app.post("/api/send_email", async (request, response) => {
console.log(request.body);
const { senderEmail, senderName, emailSubject, message } = request.body;
const service_id = process.env.REACT_APP_SERVICE_ID;
const template_id = process.env.REACT_APP_TEMPLATE_ID;
const user_id = process.env.REACT_APP_USER_ID;
const public_key = process.env.REACT_APP_PUBLIC_KEY;
response.set("Access-Control-Allow-Origin", "*");
.send(service_id, template_id, templateParams, public_key)
response.status(201).send({ msg: "Message sent!" });
response.status(500).send({ error: "Internal Server Error" });
console.log(`Server is online, listening on port ${PORT}...`);
<code>const express = require("express");
const emailjs = require("@emailjs/browser");
const cors = require("cors");
const app = express();
require("dotenv").config({
path: `.env`,
});
app.use(express.json());
app.use(cors());
const PORT = process.env.PORT;
app.post("/api/send_email", async (request, response) => {
console.log(request.body);
const { senderEmail, senderName, emailSubject, message } = request.body;
const service_id = process.env.REACT_APP_SERVICE_ID;
const template_id = process.env.REACT_APP_TEMPLATE_ID;
const user_id = process.env.REACT_APP_USER_ID;
const public_key = process.env.REACT_APP_PUBLIC_KEY;
const templateParams = {
to_name: "Cora",
from_name: senderName,
from_email: senderEmail,
message: message,
subject: emailSubject,
};
try {
response.set("Access-Control-Allow-Origin", "*");
emailjs
.send(service_id, template_id, templateParams, public_key)
.then(() => {
response.status(201).send({ msg: "Message sent!" });
});
} catch (error) {
console.error(error);
response.status(500).send({ error: "Internal Server Error" });
}
});
app.listen(PORT, () => {
console.log(`Server is online, listening on port ${PORT}...`);
});
</code>
const express = require("express");
const emailjs = require("@emailjs/browser");
const cors = require("cors");
const app = express();
require("dotenv").config({
path: `.env`,
});
app.use(express.json());
app.use(cors());
const PORT = process.env.PORT;
app.post("/api/send_email", async (request, response) => {
console.log(request.body);
const { senderEmail, senderName, emailSubject, message } = request.body;
const service_id = process.env.REACT_APP_SERVICE_ID;
const template_id = process.env.REACT_APP_TEMPLATE_ID;
const user_id = process.env.REACT_APP_USER_ID;
const public_key = process.env.REACT_APP_PUBLIC_KEY;
const templateParams = {
to_name: "Cora",
from_name: senderName,
from_email: senderEmail,
message: message,
subject: emailSubject,
};
try {
response.set("Access-Control-Allow-Origin", "*");
emailjs
.send(service_id, template_id, templateParams, public_key)
.then(() => {
response.status(201).send({ msg: "Message sent!" });
});
} catch (error) {
console.error(error);
response.status(500).send({ error: "Internal Server Error" });
}
});
app.listen(PORT, () => {
console.log(`Server is online, listening on port ${PORT}...`);
});
I went online after the following error showed up in my console:
<code>/contact:1 Access to XMLHttpRequest at 'https://contact-functionlity.onrender.com/api/send_email' from origin 'https://alfredo-galvez.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<code>/contact:1 Access to XMLHttpRequest at 'https://contact-functionlity.onrender.com/api/send_email' from origin 'https://alfredo-galvez.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
</code>
/contact:1 Access to XMLHttpRequest at 'https://contact-functionlity.onrender.com/api/send_email' from origin 'https://alfredo-galvez.netlify.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
and in most videos I saw on youtube mentioned installing cors and use it in your app, which is what I have done.
I also tried setting up the response headers using:
origin: 'https://alfredo-galvez.netlify.app'
<code>app.use(cors({
origin: 'https://alfredo-galvez.netlify.app'
}))
</code>
app.use(cors({
origin: 'https://alfredo-galvez.netlify.app'
}))
I am a little bit stuck and have been trying to understand what is going on for a quite a while now, wondering is someone could help me out.