Why can't I make this axios DELETE request?

Question

React / Firebase project. Trying to delete a document.

Error message: Access to XMLHttpRequest at ... from origin 'http://localhost:3000' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

I've added Access-Control-Allow-Methods and Access-Control-Allow-Origin headers to try and fix it but there's no effect.

    firebase
      .auth()
      .currentUser.getIdToken(true)
      .then((token) => {
        console.log(token)
        return axios.delete(
          `${FunctionsDir}/deleteMessage`,
          {
            messageID: messageID,
          },
          {
            headers: {
              Authorization: `Bearer ${token}`,
              'content-type': 'application/octet-stream',
              'Access-Control-Allow-Methods': 'DELETE',
              'Access-Control-Allow-Origin': 'http://localhost:3000',
            },
          }
        )
      })

Answer 1

Look into CORS for details, but it basilcy means the request source (i.e. localhost) isn't allowed to make a request to the request destination (i.e. ${FunctionsDir}/deleteMessage). Your COR headers aren't helping because the destination, not the source, determines who to accept requests from. I.e. the bank must approve your loan, and not the other way around.

The way forward would be to relax the CORS policy on the server (wherever ${FunctionsDir}/deleteMessage points to).

It's worth pointing out, CORS is browser-enforced. So if you don't have control over the server, then CORS can be worked around by not using a browser. E.g. you can use a node or electron application instead of a browser web page.

Lastly, if you don't have control over the server but must deploy through the browser, then you could create a proxy-server. Your web page would send requests to the proxy server who would forward them to the ${FunctionsDir}/deleteMessage destination. Since the proxy-server isn't browser based, it doesn't need to adhere to CORS.