Fetch: Add Content-Type in header will cause a OPTION request

[AllenFang]

I want to use fetch to send a POST request to my server.

But when I set the "Content-Type": "application/json" in headers,

it will cause a OPTIONS request, if I remove Content-Type in headers, it will be fine

The following is my code

//...
var f = fetch(host+"/", {
      headers: {
        "Accept": "application/json",
        "Content-Type": "application/json"
      },
      method: 'POST',
      body: 'name=Hubot'
});
f.then(json)
 .then(success)
 .catch(error)

[mislav]

Is your request cross-origin (i.e. spanning different hosts)? Then this is expected.

[dgraham]

Which browsers have you tested with? Chrome has a native implementation of window.fetch that skips the polyfill. You might compare the behavior between Chrome and Firefox (which would use the polyfill code).

[AllenFang]

I've solved this problem, just like @mislav said. It's a problem with same-origin policy.

So allow cross domain on backend will solve this problem.

I'm sorry, this is my mistake and thanks your suggestions.

[ryancole]

What is actually sending the OPTIONS request? Is it fetch itself, or is it the browser? If CORS is to be used, is the server supposed to support handling of OPTIONS requests? This is the first library I've used that has caused OPTIONS requests to be sent, so I'm just wanting to understand why and whether or not I need to be handling them.

Edit: I don't see any mention of an OPTIONS request in the code, so I'm assuming it is something to do with the browser? Why don't other Ajax libs that "support" CORS send these requests? Other libs, such as reqwest, qwest and superagent.

[mislav]

Mozilla on CORS:

Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method. Servers can also notify clients whether "credentials" (including Cookies and HTTP Authentication data) should be sent with requests.