Fetch api issue with DELETE - changes to OPTIONS even when cors is good

Question

Using fetch api in the client browser, I am not having issues with GET or POST, but I am having issues with fetch and DELETE. Its seems to change the DELETE request method to OPTIONS.

Most of the research shows to be a cors issues, but with me I have the cors issues covered.

I am not sure if this is a valid fetch spec api link but it shows:

A CORS-safe listed method is a method that is GET, HEAD, or POST.

I am not sure if this means I can not use DELETE on fetch with cors and this is why I am having issues?

browser code:

var request =
          new Request(url, {
            credentials: 'include',
            mode: 'cors',
            method: 'DELETE'
          });

        return fetch(request)
          .then(this.fetchError.bind(this))
          .then(this.json)
          .then((response)=> {
            this.set(`uploadState.${index}.value`, false);
          })
          .catch((e) => {
            console.log(e);
          });
      },

---

chrome network tab:

Request URL:http://72.12.4.3:9000/api/v1/listings/3/47/image-3-47-1492565415145.jpeg
Request Method:OPTIONS
Status Code:401 Unauthorized
Remote Address:72.12.4.3:9000

Response Headers
view source
Access-Control-Allow-Credentials:true
Access-Control-Allow-Headers:true
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:http://72.12.4.3:8000
Connection:keep-alive
Content-Length:25
Content-Type:application/json; charset=utf-8
Date:Wed, 19 Apr 2017 01:36:07 GMT
ETag:W/"19-9NCRiMyz+z1Bt6fGQfcxA"
X-Powered-By:Express

Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:
Access-Control-Request-Method:DELETE
Cache-Control:no-cache
Connection:keep-alive
Host:72.12.4.3:9000
If-None-Match:W/"19-9NCRiMyz+z1Bt6fGQfcxA"
Origin:http://72.12.4.3:8000
Pragma:no-cache
Referer:http://72.12.4.3:8000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Answer 1

The OPTIONS request is expected and basically is the mechanism that the browser uses to check if the request DELETE in this case is allowed.

The OPTIONS request seems to get a 401 Unauthorized response from your server. This would indeed cause the request to fail. Respond with 200 OK instead.

As an aside, the header Access-Control-Allow-Headers: is wrong, but this shouldn't affect anything.