CODEWITHSUNDEEP
javascriptgoogle-chromecorsfetch
jpierson
jpierson

Reputation: 17354

How to specify `application/json` Content-Type without invoking Chrome's CORS preflight request?

According to the fetch specs it appears that as long as a Content-Type is specified that is one of "application/x-www-form-urlencoded", "multipart/form-data", or "text/plain" and other conditions are satisfied then a POST request should not result in a preflight request. In practice however I've had a difficult time specifying multiple headers for fetch in a way that doesn't cause the OPTIONS request for the preflight check.

ex 1. 

fetch("https://differentsubodmain.example.com/api/resource", {
    headers: {
        "Content-Type": "text/plain, application/json",
        Accept: "application/json"
    },
    method: "POST",
    body: JSON.stringify({})
})

ex 2. 

var myHeaders = new Headers();
myHeaders.append('Accept', 'application/json');
myHeaders.append('Content-Type', 'text/plain');
myHeaders.append('Content-Type', 'application/json');

fetch("https://differentsubodmain.example.com/api/resource", {
    headers: myHeaders,
    method: "POST",
    body: JSON.stringify({})
})

ex 3.

fetch("https://differentsubodmain.example.com/api/resource", {
    headers: [
        ["Content-Type", "application/json"],
        ["Content-Type", "text/plain"],
        ["Accept", "application/json"]
    ],
    method: "POST",
    body: JSON.stringify({})
    })

Neither of these examples succeed in requesting without the preflight request but specifying either with only "Content-Type": "text/plain" appears to work just fine. The example here however shows both being specified in a request and suggests that it shouldn't cause a preflight. Is this just an issue with different browser implementations or am I missing something?

Upvotes: 3

Views: 3910

Answers (1)

jpierson
jpierson

Reputation: 17354

It looks like perhaps I hadn't read that reference carefully. Below is the important excerpt.

Warning. This intentionally does not use extract a MIME type as that algorithm is rather forgiving and servers are not expected to implement it.

If extract a MIME type were used the following request would not result in a CORS preflight and a naïve parser on the server might treat the request body as JSON

It looks like we are largely constrained to the mime types application/x-www-form-urlencoded, multipart/form-data, or text/plain to avoid preflight requests for CORS.

Reference:

Upvotes: 5

Related Questions