Why does Fetch API Send the first PUT request as OPTIONS

Question

I am trying to make a cors PUT request using the vanilla Fetch API

When I click my button to send the PUT request, the method on the first request is OPTIONS. It is only when I click the button again, then the method on the request changes to PUT. Why?

I understand this is part of the CORS preflight, but is there a way to trigger the preflight manually so the OPTIONS response can be cached?

Could this behavior be indicative of a failing promise somewhere?

Maceio

Have you read the specification? – Lammergeier

Yes, I've read the spec. I'm wondering how this is handled -- do I need to check the already sent request to see if it's an OPTIONS request then send it again? – Maceio

Is the specification not clear? – Lammergeier

No, it's not. Does the preflight fetch happen manually or automatically? – Maceio

Can you include the javascript that you are trying at Question? You could perform the request manually, if, from what can gather, the preflight request is occurring automatically. fetch("url", {method:"OPTIONS"}) .then(response => response.headers) .then(_headers => Array.from(_headers.entries(), h => console.log(h))).catch(err => console.error(err)), else, from reading of specification, a network error would occur. If from your interpretation the specification is not clear, would suggest searching for a similar issue, or filing an issue at github.com/whatwg/fetch/issues – Lammergeier

You are completely correct -- the REAL issue was bad UI in the Google Chrome network explorer. – Maceio

Answer 1

See the Fetch Standard, section 4.7. CORS-preflight fetch.

Note: This is effectively the user agent implementation of the check to see if the CORS protocol is understood. The so-called CORS-preflight request. If successful it populates the CORS-preflight cache to minimize the number of these fetches.

at steps 1 through 7; also 4.8. CORS-preflight cache.

Lammergeier