title: How to make angular2 properly trigger the correct callback after successful preflight requests
body: <p>In my angular2 app, I tried to make a cross domain ajax call. Although the call went through successfully, on angular2 side, the error callback was always triggered instead of the success callback. Here is the code:</p>
  
  <pre><code>this.http.post('http://localhost:3000/tasks/add', '["' + task + '"]', {headers: headers}).subscribe(
          data =&gt; null,
          err =&gt; alert("err"),
          () =&gt; alert("succ")
      );
  </code></pre>
  
  <p>In the browser console I saw this:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:3000/tasks/add. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
  </code></pre>
  
  <p>The server side was implemented in nodejs and it included the following to handle preflight</p>
  
  <pre><code>router.options('/add', (req, res, next) =&gt; {
      console.log('!OPTIONS');
      var headers = {};
      // IE8 does not allow domains to be specified, just the *
      // headers["Access-Control-Allow-Origin"] = req.headers.origin;
      headers["Access-Control-Allow-Origin"] = "*";
      headers["Access-Control-Allow-Methods"] = "POST, GET, PUT, DELETE, OPTIONS";
      headers["Access-Control-Allow-Credentials"] = false;
      headers["Access-Control-Max-Age"] = '86400'; // 24 hours
      headers["Access-Control-Allow-Headers"] = "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept";
      res.writeHead(200, headers);
      res.end();
  });
  </code></pre>
  
  <p>The above server code was successfully executed, and client side did send the post request after the preflight options request.</p>
  
  <p>My question is, what can I do in angular2 to make it trigger the success callback, which it should?  </p>
  
  <p><strong>Update:</strong> </p>
  
  <p>I am attaching a screenshot here and it was took in Chrome. The bottom part of it shows CORS error message, but top portion shows that the request went okay with 200. As a matter of fact it did go through, as I received both the options and post requests on the server side. </p>
  
  <p><a href="https://i.stack.imgur.com/8QU5h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8QU5h.png" alt="enter image description here"></a></p>
  
  <p><strong>Update 2:</strong></p>
  
  <p>Tried express-cors on nodejs (server) side, still the same. (My initial code already handles preflight options request - the code can be found above in the original portion of this post. Unless there was a mistake in my original nodejs code, express-cors was not expected to change anything.)</p>
  
  <p>Below is the code I tried with express-cors, basically the same as what's on its npm page:</p>
  
  <pre><code>var express = require('express');
  var cors = require('express-cors')
  
  var router = express.Router();
  router.use(cors({
      allowedOrigins: [
          '*'
      ]
  }))
  </code></pre>
  
  <p><strong>Update 3:</strong></p>
  
  <p>Mystery solved! In my original code I only set the CORS headers in the options response, but not the response to the post request followed the options request. That appeared to still allow the whole process to complete at the application level - since the server side did get the post request and processed the data, but angular saw an error since the response did not include the proper headers. I modified my code to not only send back CORS headers in the options response, but also the post response, and now angular triggers the success callback.</p>