Pre-flight Request not triggered for CORS check

Question

As I understand, a pre-flight request is sent by the browser if any of the following conditions is false (source: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests):

• Request method is GET, HEAD or POST.
• Custom headers are not set.
• Content-Type header value is either application/x-www-form-urlencoded, multipart/form-data or text/plain.

I have a web app which sends a GET request to a server on a different origin. Since I have to send cookies to the server, the property withCredentials is set to true. The header Content-Type is set to application/json. For this request, the browser does not trigger a pre-flight request, but it should because the third condition is false. What could be the reason behind this? Does it have anything to do with the insignificance of Content-Type header for a GET request (since there is no request body)?

EDIT: Adding request code:

configObject = {
  'withCredentials': true,
  headers: {
    'Content-Type': 'application/json'
  }
};

function getRequest(url, dict) {
  $http.get(url, Object.assign({}, configObject)).success(function(result) {
    // on success
  }).error(function(err) {
    // on error
  });
  // return
}

Answer 1

If your frontend code is initiating a cross-origin request and the code making the request actually sets the Content-Type header to application/json, then that’ll absolutely trigger the browser to do a preflight. Always.

So that means, in the case in the question, the reason the browser isn’t getting triggered to do a preflight is that the header isn’t actually getting added to the request the browser ends up sending.

But the particular case described in the question is… odd — because it’s trying to add a Content-Type header to a GET request, and the GET request in the question (like pretty much all other GET requests) doesn’t have a request body.

And so what the cause comes down to in this case is that Angular, for $http calls, automatically does something arguably kind of smart (if unexpected): In the absence of a request body, it removes the Content-Type header from the request — which makes some good sense, because if there’s no request body, there’s no need to have a header specifying its media type.

See the accepted answer at Angular, content type is not being sent with $http for confirmation of that.

And so, if for some reason you really need to include the Content-Type header in a request having no request body, then the solution is either to not use Angular’s $http at all — and instead use, say, the standard Fetch API, which will allow you to include the Content-Type even for requests lacking a request body — or else (in case you also have some requirement to use Angular’s $http) to pass in an empty request body as part of the $http request (by adding data: '' to the request).