Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Angular $http.delete CORS error (preflight request)

I have an Angular app (v1.13.15) and Express.js(v4.12.4) as backend.

I have a DELETE method in my backend, and I have enabled CORS support for it.

But, when I use Angular $http.delete, I run into this error

No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have tried using Jquery, $.ajax() call for it, and I get the same problem!

I also tried using POSTMAN to do a DELETE request and there is no problem.

But, I have no problem accessing using my Angular for my GET and POST method..

May I know what is this problem?

My backend URL http://localhost:3000

I serving my AngularJS using gulp-webserver http://localhost:8000

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;


and my Angular code

$http.delete(API_URL + '/gps/' + id)
                .success(function(res) {
                    if (res.result !== 1) {
                        return defer.reject(new Error(id + ' failed to delete'));

                .error(function(status) {

I have no problem with GET and POST method! only when I use DELETE method, I ran into CORS errors!

I have attached a screenshot below for the request header using Google Chrome

Angular CORs problme

Below is the screenshot from Postman,

POSTMAN delete

like image 434
Tim Avatar asked Mar 16 '23 22:03


1 Answers

I managed to solve this problem, it is due to preflight request


When doing CORS for DELETE, it will first send an OPTIONS method to the server, and then it will resolve to DELETE method

So it in backend, I should have route for OPTIONS and then call next() to pass it to DELETE method

Backend code:

app.options('/gps/:id', routes.gps.optionGPSData);
app.delete('/gps/:id', routes.gps.deleteGPSData);

and my router middleware

exports.optionGPSData = (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'DELETE');
res.header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type');


POSTMAN is able to perform a DELETE request? (this is because it sends a DELETE http request to my server, and not OPTIONS) whereas in web browser, it will send an OPTIONS for preflight request (this is mainly for security concern)

*shoutout to @FrankerZ, he enlights me to compare POSTMAN and my Chrome result, and then I see there is a difference in Access Control Allow Method, which leads me to try cors middleware (https://www.npmjs.com/package/cors), and it works and then I managed to pin the problem and is due to the preflight request!

like image 154
Tim Avatar answered Apr 02 '23 23:04