Access-Control-Allow-Methods

Question

I am making the following HTTP request from my frontend. All of my GET requests made in the same way work, but the following UPDATE fails:

Access to fetch at '127.0.0.1/backend/path' from origin ' http://localhost:3000 ' has been blocked by CORS policy: Method UPDATE is not allowed by Access-Control-Allow-Methods in preflight response.

Frontend Request

return fetch(
      `127.0.0.1/backend/path`,
      {
        method: "UPDATE",
        body: JSON.stringify(newClass),
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods":
            "GET, POST, PUT, DELETE, OPTIONS, UPDATE",
          "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token",
          "Content-Type": "application/json",
          Authorization: "Bearer " + getState().authToken
        }
      }
    )

Backend Flask endpoint

@app.route('/backend/path', methods=['UPDATE'])
@authenticate
def update_data():
    return {"data": "has been updated"}

This answer suggests adding an Access-Control-Allow-Methods header, but this is already present on my request! I also don't just want to turn off CORS for my browser, as I need it implemented correctly.

Answer 1

Access-Control-Allow-Methods must be in the OPTIONS response header. Remember that the backend controls how it is accessed. You cannot add allowed methods simply by requesting them.

Also, UPDATE isn't a standard HTTP verb. Do you mean PUT or PATCH ?