4

I am trying to make a DELETE ajax request but I can't seem to make it work. When I make it using POSTMAN it works. Here's my code:

This is my request, made with jQuery's .ajax() method:

$.ajax({
    url: imageUrl,
    type: 'DELETE',
    crossDomain: true
});

On the server, a different app built with node.js + express, I have:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

And finally, these are my Request, Request Headers and Response Headers:

Request

Request URL:http://original/request/url
Request Method:OPTIONS
Status Code:200 OK
Remote Address:75.126.137.93:80

Request Headers

Accept:*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4,es;q=0.2,gl;q=0.2
Access-Control-Request-Headers:
Access-Control-Request-Method:DELETE
Connection:keep-alive
Host:fs.bvodola.webfactional.com
Origin:http://localhost:3000
Referer:http://localhost:3000/landing/admin/add-page
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

Response Headers

Access-Control-Allow-Headers:Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Origin:*
Allow:GET,HEAD,DELETE
Connection:keep-alive
Content-Length:15
Content-Type:text/html; charset=utf-8
Date:Sat, 03 Sep 2016 23:34:17 GMT
ETag:W/"f-W+bYAIA7Bs2GwQecFLp1SA"
Server:nginx
X-Powered-By:Express

And in the Console i get the following:

XMLHttpRequest cannot load http://original/request/url. Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

How can I solve this? On some StackOverflow questions I read that Access-Control-Allow-Headers must the same as Access-Control-Request-Headers. But when I try to set it on the jQuery request, I get the following on the console:

Refused to set unsafe header "Access-Control-Request-Headers"

Any ideas of what might be wrong? Thanks!

I have looked at the following StackOverflow questions but couldn't find the answer:

Community
  • 1
  • 1
Brunno Vodola Martins
  • 1,582
  • 2
  • 15
  • 17
  • CORS headers are to be set in Response headers, not in Request headers. – Developer Sep 04 '16 at 02:01
  • Hi, @Developer, as you can see from my $.ajax() call, I'm not setting headers on the request. I just tried it because I didn't know what else to do but quickly found that that was not the right way to go. – Brunno Vodola Martins Sep 04 '16 at 03:55
  • 1
    Gotcha. Could you try setting the allowed methods as well in the response headers? *Access-Control-Allow-Methods* to "*" or specific methods you would like to allow as comma separated? – Developer Sep 04 '16 at 04:57
  • @Developer, I first set `Access-Control-Allow-Methods` to '*' and it didn't work. But then I set it to 'GET, POST, PUT, DELETE' (which are the methods I want to allow) and it finally worked. =) Thanks, man! I got confused by the `Allow` header of the response (as you can see, DELETE is there) and forgot about `Access-Control-Allow-Methods`. If you'd like to post it as the answer, I'll be sure to mark is as the correct one. – Brunno Vodola Martins Sep 04 '16 at 19:53
  • Glad I helped. Cheers – Developer Sep 05 '16 at 01:16

1 Answers1

11

Add Access-Control-Allow-Methods as well in the response headers with the methods you would like to allow as comma separated: 'GET, POST,DELETE...'

Developer
  • 6,240
  • 3
  • 18
  • 24