Sunday 19 November 2017

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

style="font-weight: bold;">

Answer



style="font-weight: bold;">

Answer





I am trying to support CORS in my
Node.js application that uses the Express.js web framework. I have read href="http://groups.google.com/group/express-js/browse_thread/thread/71db58df2c74d06a"
rel="noreferrer">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?



Answer




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 href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests"
rel="noreferrer">MDN Web API Reference - CORS Preflighted
requests


No comments:

Post a Comment

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print &q...