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

Question

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  - gt    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  - gt            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

User · Answer

If i were you  OP i would change my programming paradigm   assuming you are getting these CORS blocked because you are making requests to localhost or something similar   Eventually if you are going to deploy to production optoins like Google Cloud Platform or Heroku or   you will no have to worry about CORS like allow origin or whatever when in production   so when testing the server just use postman and you will not get CORS blocked  after that deploy your server and then work on your client

User · Answer

Below worked for me  hope it helps someone   const express   require  express    const cors   require  cors    let app   express     app use cors   origin  true        Got reference from https   expressjs com en resources middleware cors html configuring-cors

User · Answer

My simplest solution with Express 4 2 0  EDIT  Doesn t seem to work in 4 3 0  was   function supportCrossOriginScript req  res  next        res status 200       res header  Access-Control-Allow-Origin             res header  Access-Control-Allow-Headers    Content-Type            res header  Access-Control-Allow-Headers    Origin           res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept           res header  Access-Control-Allow-Methods   POST  OPTIONS           res header  Access-Control-Allow-Methods   POST  GET  OPTIONS  DELETE  PUT  HEAD           res header  Access-Control-Max-Age   1728000        next          Support CORS app options   result   supportCrossOriginScript    app post   result   supportCrossOriginScript  function req  res        res send  received           do stuff with req       I suppose doing app all   result        would work too

User · Answer

Can refer the code below for the same  Source  Academind node-restful-api    const express   require  express    const app   express       acts as a middleware   to handle CORS Errors app use  req  res  next    gt      doesn t send response just adjusts it     res header  Access-Control-Allow-Origin            to give access to any origin     res header           Access-Control-Allow-Headers            Origin  X-Requested-With  Content-Type  Accept  Authorization    to give access to all the headers provided            if req method      OPTIONS            res header  Access-Control-Allow-Methods    PUT  POST  PATCH  DELETE  GET      to give access to all the methods provided         return res status 200  json                next      so that other routes can take over

User · Answer

Using Express Middleware works great for me  If you are already using Express  just add the following middleware rules  It should start working    app all   api     function req  res  next      res header  Access-Control-Allow-Origin           res header  Access-Control-Allow-Headers    Cache-Control  Pragma  Origin  Authorization  Content-Type  X-Requested-With      res header  Access-Control-Allow-Methods    GET  PUT  POST      return next         app all   api     function req  res  next      if  req method toLowerCase        options         return next          return res send 204         Reference

User · 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    application x-www-form-urlencoded multipart form-data 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    Accept Accept-Language Content-Language Content-Type DPR Save-Data Viewport-Width 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

User · Answer

do  npm install cors --save   and just add  these lines in your main file where your request going  keep it before any route    const cors   require  cors    const express   require  express    let app   express    app use cors     app options      cors

User · Answer

Testing done with express   node   ionic running in differente ports   Localhost 8100  Localhost 5000     CORS  Cross-Origin Resource Sharing  headers to support Cross-site HTTP requests  app all      function req  res  next           res header  Access-Control-Allow-Origin                res header  Access-Control-Allow-Headers    X-Requested-With           res header  Access-Control-Allow-Headers    Content-Type           next

User · Answer

I have made a more complete middleware suitable for express or connect  It supports OPTIONS requests for preflight checking  Note that it will allow CORS access to anything  you might want to put in some checks if you want to limit access   app use function req  res  next        var oneof   false      if req headers origin            res header  Access-Control-Allow-Origin   req headers origin           oneof   true            if req headers  access-control-request-method              res header  Access-Control-Allow-Methods   req headers  access-control-request-method             oneof   true            if req headers  access-control-request-headers              res header  Access-Control-Allow-Headers   req headers  access-control-request-headers             oneof   true            if oneof            res header  Access-Control-Max-Age   60   60   24   365                 intercept OPTIONS method     if  oneof  amp  amp  req method     OPTIONS             res send 200             else           next

User · Answer

I used the following steps to my web app and I had success   Add the cors package to the express   npm install cors --save   Add following lines after the bodyParser configuration  I had some troubles adding before bodyParser       enable cors to the server const corsOpt         origin  process env CORS ALLOW ORIGIN            this work well to configure origin url in the server     methods    GET    PUT    POST    DELETE    OPTIONS       to works well with web app  OPTIONS is required     allowedHeaders    Content-Type    Authorization      allow json and token in the headers    app use cors corsOpt       cors for all the routes of the application app options      cors corsOpt       automatic cors gen for HTTP verbs in all routes  This can be redundant but I kept to be sure that will always work

User · Answer

This works for me  as its an easy implementation inside the routes  im using meanjs and its working fine  safari  chrome  etc   app route   footer-contact-form   post emailer sendFooterMail  options function req res next            res header  Access-Control-Allow-Origin                  res header  Access-Control-Allow-Methods    GET  POST            res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept            return res send 200

User · Answer

simple is hard    let my data      const promise   new Promise async function  resolve  reject        axios post  https   cors-anywhere herokuapp com https   maps googleapis com maps api directions json origin 33 69057660000001 72 9782724 amp destination 33 691478  2072 978594 amp key AIzaSyApzbs5QDJOnEObdSBN Cmln5ZWxx323vA               Origin    https   localhost 3000              then function  response                console log  axios response   response data                const my data   response data             resolve my data                      catch function  error                console log error              alert  connection error                 promise then data   gt        console log JSON stringify data

User · Answer

Some time ago  I faced this problem so I did this to allow CORS in my nodejs app   First you need to install cors by using below command    npm install cors --save   Now add the following code to your app starting file like   app js or server js   var express   require  express    var app   express     var cors   require  cors    var bodyParser   require  body-parser       enables cors app use cors      allowedHeaders     sessionId    Content-Type       exposedHeaders     sessionId       origin           methods    GET HEAD PUT PATCH POST DELETE      preflightContinue   false       require    router index   app

User · Answer

To stay in the same idea of routing  I  use this code    app all       function req  res  next      res header  Access-Control-Allow-Origin           res header  Access-Control-Allow-Headers    X-Requested-With      next          Similar to http   enable-cors org server expressjs html example

User · Answer

Below code will work  but first install cors by   npm install --save cors  Then   module exports   function app     var express   require  express    var cors   require  cors    var router   express Router    app use cors      app post   movies  cors    function req  res     res send  test

User · Answer

first simply install cors in your project  Take terminal command prompt  and cd to your project directory and run the below command   npm install cors --save   Then take the server js file and change the code to add the following in it   var cors   require  cors      var app   express     app use cors      app use function req  res  next       res header  Access-Control-Allow-Origin            res header  Access-Control-Allow-Methods    DELETE  PUT  GET  POST       res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept       next          This worked for me

User · Answer

I found it to be extremely easy to do this with the npm request package  https   www npmjs com package request    Then I based my solution on this post http   blog javascripting com 2015 01 17 dont-hassle-with-cors    use strict   const express   require  express    const request   require  request     let proxyConfig         url             base   http   servertoreach com id                setting up and configuring node express server for the application    let server   express    server set  port   3000        methods forwarded to the servertoreach proxy     server use   somethingElse   function req  res        let url   proxyConfig url base   req query id      req pipe request url   pipe res            start the server    server listen server get  port    function         console log  express server with a proxy listening on port     server get  port

User · Answer

If you want to make it controller specific  you can use   res setHeader  X-Frame-Options    ALLOWALL    res setHeader  Access-Control-Allow-Origin         res setHeader  Access-Control-Allow-Methods    POST  GET    res setHeader  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept      Please note that this will also allow iframes

User · Answer

using CORS package  and put this parameters  cors  credentials  true  origin  true  exposedHeaders

User · Answer

In my index js I added   app use  req  res  next    gt       res header  Access-Control-Allow-Origin            res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept       res header  Access-Control-Allow-Methods    GET  POST  PUT  DELETE  OPTIONS       next

User · Answer

You can use Express middleware  block your domain and methods   app use function req  res  next      res header  Access-Control-Allow-Origin   process env DOMAIN      update to match the domain you will make the request from   res header  Access-Control-Allow-Methods    GET PUT POST DELETE      res header       Access-Control-Allow-Headers        Origin  X-Requested-With  Content-Type  Accept         next

User · Answer

Try passing control to the next matching route   If Express is matching app get route first  then it won t continue onto the options route unless you do this  note use of next    app get  somethingelse   function req  res  next            set headers etc       next          In terms of organising the CORS stuff  I put it in a middleware which is working well for me     CORS middleware var allowCrossDomain   function req  res  next        res header  Access-Control-Allow-Origin    example com        res header  Access-Control-Allow-Methods    GET PUT POST DELETE        res header  Access-Control-Allow-Headers    Content-Type         next             app configure function         app use express bodyParser         app use express cookieParser         app use express session   secret   cool beans           app use express methodOverride         app use allowCrossDomain       app use app router       app use express static   dirname     public

User · Answer

first of all  and this might be the problem amongst junior devs out there  like myself  make sure to use  lambda           and not     in your fetch method          const response   await fetch https   api         plus  the following article is highly recommended  https   developer edamam com api faq

User · Answer

install cors module of expressjs  you can follow these steps     Installation   npm install cors   Simple Usage  Enable All CORS Requests   var express   require  express    var cors   require  cors    var app   express    app use cors       for more details go to https   github com expressjs cors

User · Answer

Try this in your main js file   app use  req  res  next    gt    res header  Access-Control-Allow-Origin         res header     Access-Control-Allow-Headers      Authorization  X-API-KEY  Origin  X-Requested-With  Content-Type  Accept  Access-Control-Allow-Request-Method     res header  Access-Control-Allow-Methods    GET  POST  OPTIONS  PUT  DELETE    res header  Allow    GET  POST  OPTIONS  PUT  DELETE    next          This should solve your problem

User · Answer

Do something like this   app use function req  res  next        res header  Access-Control-Allow-Origin             res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept        next

User · Answer

In typescript  if you want to use the node js package cors        app ts   If you use the cors library     import   as express from  express         import   as cors from  cors    class App      public express  express Application      constructor            this express   express                       this handleCORSErrors             private handleCORSErrors    any          const corsOptions  cors CorsOptions                origin   http   example com              optionsSuccessStatus  200                  this express use cors corsOptions            export default new App   express    If you don t want to use third part libraries for cors error handling  you need to change the handleCORSErrors   method         app ts   If you do not use the cors library     import   as express from  express          class App      public express  express Application      constructor            this express   express                       this handleCORSErrors             private handleCORSErrors    any          this express use  req  res  next    gt               res header  Access-Control-Allow-Origin                    res header                  Access-Control-ALlow-Headers                   Origin  X-Requested-With  Content-Type  Accept  Authorization                           if  req method      OPTIONS                    res header                      Access-Control-Allow-Methods                       PUT  POST  PATCH  GET  DELETE                                   return res status 200  json                               next       send the request to the next middleware                     export default new App   express    For using the app ts file        server ts    import   as http from  http   import app from    app    const server  http Server   http createServer app    const PORT  any   process env PORT    3000  server listen PORT

User · Answer

We can avoid CORS and forward the requests to the other server instead      config  var public folder     dirname     public  var apiServerHost    http   other server      code  console log  starting server        var express   require  express    var app   express    var request   require  request        serve static files app use express static public folder        if not found  serve from another server app use function req  res        var url   apiServerHost   req url      req pipe request url   pipe res        app listen 80  function        console log  server ready

User · Answer

The simplest approach is install the cors module in your project using   npm i --save cors   Then in your server file import it using the following   import cors from  cors     Then simply use it as a middleware like this   app use cors       Hope this helps

User · Answer

This is similiar to Pat s answer with the difference that I finish with res sendStatus 200   instead of next      The code will catch all the requests of the method type OPTIONS and send back access-control-headers   app options        req  res  next    gt        res header  Access-Control-Allow-Origin             res header  Access-Control-Allow-Methods    GET PUT POST DELETE OPTIONS        res header  Access-Control-Allow-Headers    Content-Type  Authorization  Content-Length  X-Requested-With        res sendStatus 200         The code accepts CORS from all origins as requested in the question  However  it would be better to replace the   with a specific origin i e  http   localhost 8080 to prevent misuse   Since we use the app options-method instead of the app use-method we don t need to make this check    req method      OPTIONS    which we can see in some of the other answers   I found the answer here  http   johnzhang io options-request-in-express

User · Answer

The easiest answer is to just use the cors package   const cors   require  cors     const app   require  express      app use cors       That will enable CORS across the board  If you want to learn how to enable CORS without outside modules  all you really need is some Express middleware that sets the  Access-Control-Allow-Origin  header  That s the minimum you need to allow cross-request domains from a browser to your server   app options       req  res    gt      res set  Access-Control-Allow-Origin           res send  ok         app use  req  res    gt      res set  Access-Control-Allow-Origin

User · Answer

using nodejs without express external libraries I made use of the below method within my server js file     The key parts here are getting the origin from the request header then allowing it in the server response at which point we can set the header that will be returned including the allowed origin if a match is found            const origin   req headers origin           let decoder   new StringDecoder  utf-8          let buffer             req on  data   function  data            buffer    decoder write data                   req on  end   function              buffer    decoder end             let chosenHandler   typeof  server router trimmedPath        undefined    server router trimmedPath    handlers notFound   const data         data object vars      should be wrapped in try catch block       chosenHandler data  function  statusCode  payload  contentType            server processHandlerResponse res  method  trimmedPath  statusCode  payload  contentType    origin       server processHandlerResponse   function  res  method  trimmedPath  statusCode  payload  contentType  origin      contentType   typeof  contentType      string    contentType    json      statusCode   typeof  statusCode      number    statusCode   200     let payloadString         if  contentType     json         res setHeader  Content-Type    application json         const allowedOrigins     https   www domain1 com    https   someotherdomain   https   yetanotherdomain             as many as you need            if  allowedOrigins indexOf origin   gt  -1            res setHeader  Access-Control-Allow-Origin   origin               payload   typeof  payload      object    payload           payloadString   JSON stringify payload                if  other content type     rinse and repeat

User · Answer

I found the easiest way is to use the node js package cors  The simplest usage is   var cors   require  cors    var app   express   app use cors      There are  of course many ways to configure the behaviour to your needs  the page linked above shows a number of examples

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

Examples related to node.js

Examples related to express

Examples related to coffeescript

Examples related to cors