Why is my patch request being blocked despite PATCH being allowed by the server's CORS policy?

The Gist API explicitly allows any * host and the PATCH method:

access-control-allow-origin: *
access-control-allow-methods: GET,PUT,PATCH,OPTIONS,POST

However, when a PATCH request is issued from a development app running on http://localhost via browser fetch API to a private Gist with a valid token, Chrome blocks it due to:

Access to fetch at 'https://api.github.com/gists/c4c...86d' from origin 'http://localhost' has been blocked by CORS policy: Method patch is not allowed by Access-Control-Allow-Methods in preflight response.

• I have tried non-localhost names such as http://127.0.0.1, http://local.host etc.
• As I understand it the HTTP/HTTPS crossover should also not be a problems since * is defined as the allowed origin.

Interestingly the pre-flight request appears after my blocked PATCH request:

1. Why is Chrome claiming PATCH is not allowed, when it clearly is?
2. Why is Chrome doing a pre-flight request after my PATCH?

Why is Chrome claiming PATCH is not allowed, when it clearly is?

Check again. The CORS error you're observing is caused by a case mismatch. Your request uses patch(lowercase) as its method, but the server's CORS configuration happens to allow PATCH (uppercase), not patch.

HTTP methods are case-sensitive. Fetch-compliant browsers do normalise "standard" methods to uppercase before sending a request, but patch is not one of them.

The solution is simple: rather than patch, use PATCH as the method of your request.

Why is Chrome doing a pre-flight request after my PATCH?

It's not. See Why does the preflight (OPTIONS) request get listed after the actual (GET) request?