I am currently encountering an issue with my Angular project, where I am trying to send a POST Request to an Express Server hosted on Heroku in order to send out an email. However, every time I send the POST request to the server, I receive a 404 error.
My ultimate goal is to successfully send the request to the server without any errors.
Attached below is an image displaying the error message:
https://i.sstatic.net/saaMK.png
Below is the mail.service code snippet:
sendEmail(name: string, email: string, termin: string, text: string): Observable<any> {
return this.http.post<any>(`/api/email`, {
name: name,
email: email,
date: termin,
text: text
})
}
Now moving onto the proxy.conf.json file:
{
"/api/email": {
"target": "{url to heroku app}/api/email",
"secure": true,
"changeOrigin": true,
"logLevel": "debug"
}
}
Next, here is the configuration for the expressjs server:
// Imports cors, body parser, express
var app = express();
var allowList = ['localhost:4200', 'http://nmma.netlify.app', 'http://nmma.ch']
app.use(bodyParser.json());
/*
app.use(cors({
origin: function (origin, callback) {
console.log(origin);
if (allowList.indexOf(origin) === -1) {
var msg = 'The CORS policy for this site does not allow access from the specified Origin.'
return callback(msg, false);
}
return callback(null, true);
}
}));
*/
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
app.post("/api/email", function (req, res) {
// Handling email sending logic
res.sendStatus(200);
});
I initially attempted to use just the URL, but it resulted in not being able to locate the URL. Thus, I implemented the proxy.conf.json. Despite setting it up, the connection to the heroku server still could not be established.
Additionally, on the backend side, I included cors which was later removed as I suspected it might have been blocking my request attempts. A question that arises is whether a Heroku app also comes with its own Cors implementation?