node.jsexpresscoffeescriptcors

Why doesn't adding CORS headers to an OPTIONS route allow browsers to access my API?

I am trying to support CORS in my Node.js application that uses the Express.js web framework. I have read a Google group discussion about how to handle this, and read a few articles about how CORS works. First, I did this (code is written in CoffeeScript syntax):

app.options "*", (req, res) ->
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  # try: 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Methods', 'GET, OPTIONS'
  # try: 'X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

It doesn't seem to work. It seems like my browser (Chrome) is not sending the initial OPTIONS request. When I just updated the block for the resource I need to submit a cross-origin GET request to:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

It works (in Chrome). This also works in Safari.

I have read that...

In a browser implementing CORS, each cross-origin GET or POST request is preceded by an OPTIONS request that checks whether the GET or POST is OK.

So my main question is, how come this doesn't seem to happen in my case? Why isn't my app.options block called? Why do I need to set the headers in my main app.get block?

Solution

  • To answer your main question, the CORS spec only requires the OPTIONS call to precede the POST or GET if the POST or GET has any non-simple content or headers in it.

    Content-Types that require a CORS pre-flight request (the OPTIONS call) are any Content-Type except the following:

    1. application/x-www-form-urlencoded
    2. multipart/form-data
    3. text/plain

    Any other Content-Types apart from those listed above will trigger a pre-flight request.

    As for Headers, any Request Headers apart from the following will trigger a pre-flight request:

    1. Accept
    2. Accept-Language
    3. Content-Language
    4. Content-Type
    5. DPR
    6. Save-Data
    7. Viewport-Width
    8. Width

    Any other Request Headers will trigger the pre-flight request.

    So, you could add a custom header such as: x-Trigger: CORS, and that should trigger the pre-flight request and hit the OPTIONS block.

    See MDN Web API Reference - CORS Preflighted requests