I am facing an issue with my Angular app (v1.13.15) and Express.js(v4.12.4) backend.
Specifically, I have set up a DELETE method in my backend and enabled CORS support for it.
However, every time I attempt to use the Angular $http.delete function, I encounter the following error:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Even after trying alternatives like Jquery's $.ajax() method, the problem persists!
Interestingly, when using POSTMAN for a DELETE request everything works fine.
Strangely enough, accessing my backend via Angular for GET and POST methods poses no issues.
I am seeking assistance to diagnose and resolve this perplexing problem.
This is my backend URL: http://localhost:3000
And I serve my AngularJS application using gulp-webserver at: http://localhost:8000
The snippet from my server code:
exports.deleteGPSData = (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
let id = req.params.id;
res.send('here');
}
As for my Angular implementation:
$http.delete(API_URL + '/gps/' + id)
.success(function(res) {
if (res.result !== 1) {
return defer.reject(new Error(id + ' failed to delete'));
}
defer.resolve(res.id);
})
.error(function(status) {
defer.reject(status);
});
The peculiarity here is that only my DELETE method encounters CORS errors, while the GET and POST methods work flawlessly!
For reference, I have included a screenshot of the request header using Google Chrome below.
Furthermore, here is the Postman screenshot for comparison: