Fetch: CORS POST never occurs, even with successful OPTIONS preflight.

[chalisegrogan]

I have the following set up to POST to a different domain:

fetch(params.url, params.options)
  .then(this._errorHandler)
  .then(response => {
    statusCode = response.status;
    return response.json();
  })
  .then(result => {
    result.statusCode = statusCode;
    return Promise.resolve(result);
  });

where my options look like:

{
  body: JSON.stringify(requestBody),
  credentials: 'same-origin',
  mode: 'cors',
  headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
  method: 'POST'
}

When I am creating a POST request (that requires CORS), the OPTIONS preflight returns as a 200 with the correct headers, but the fetch never actually does the POST request. Is there something I need to add to the options, or handle in another manner? I couldn't find another issue or documentation related to this specific problem.

Edit: Yes, there is actually a properly set-up server with CORS enabled and working in other xhr requests.

[ghost]

I also met the problem yesterday, I used fetch-polyfill, Then it works

[mislav]

@chalisegrogan Which browser did you have problems with, and does that browser provide a native implementation of window.fetch()?

[pavloo]

same problem here, but with PUT request

[neurosnap]

Does the request go through or does it just not show up in Chrome's dev tools? I'm having the same exact issue and found this chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=457484

Basically all fetch API requests with preflight end up in the Network -> Other tab

[dgraham]

It's hard to debug this without knowing what browser isn't working. Only IE and Safari use this polyfill code. Chrome, Firefox, and Edge have native implementations that bypass the polyfill.

CORS has proven difficult to configure correctly (search the issue tracker for "CORS" or "cross-origin" to see just how difficult it is).

Yes, there is actually a properly set-up server with CORS enabled and working in other xhr requests.

The polyfill uses XMLHttpRequest, so if you have working XHR CORS requests, you can set a debugger breakpoint and compare the fetch configuration of the request to your other working requests.

[mistadikay]

Basically all fetch API requests with preflight end up in the Network -> Other tab

it was exactly the case for me in Chrome 🙈