Cross-Origin Request Blocked even after adding headers in server code

I've a simple API in Express/Node and I also have a simple angular application for posting blogs. The only problem is when I hit the /contribute route using POST method. I'm getting this error on both chrome and firefox:

error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … } ​ headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) } ​ message: "Http failure response for localhost:3000/api/contribute: 0 Unknown Error" ​ name: "HttpErrorResponse" ​ ok: false ​ status: 0 ​ statusText: "Unknown Error" ​ url: "localhost:3000/api/contribute" ​ : {…} ​​ constructor: class HttpErrorResponse { constructor(init) }​​ : {…} ​​​ constructor: class HttpResponseBase { constructor(init, defaultStatus, defaultStatusText) }​​​ : {…

Here's my server side code.

api.js

...
router.post('/contribute', (req, res) => {
    console.log('Pushing new article');
    let userPost = req.body;
    let post = new Post(userPost);
    post.save((error, registeredPost) => {
        if (error) {
            console.log(error);
        } else {
            res.status(200).send(registeredPost);
        }
    })
})
...
module.exports = router;

server.js

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

const api = require('./routes/api');
const cors = require('cors');

app.use(bodyParser.json());

// app.use(cors({ origin: 'http://localhost:4200' })); <--- TRIED THIS ALSO

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4200');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

app.use('/api', api);
app.get('/', function(req, res) {
    res.send('Server is up and running!');
})

app.listen(3000, function() {
    console.log('Server listening port:3000');
});

Yes, server is up and running.

Here is angular code. auth.service.ts

private _contributeUrl = "https://localhost:3000/api/contribute";
...
pushNewPost(newPost) {
  console.log("here is the new post", newPost); // GETTING CORRECT OUTPUT
  return this._http.post<any>(this._contributeUrl, newPost);
}

contribute.component.ts

this._auth.pushNewPost(this.makeNewPost)
.subscribe (
  res => {
    (<HTMLInputElement>document.getElementById("inputTitle")).value="";
    this.editorForm.reset();
    this.addSingle();
  },
  err => console.log(err)
);

Now the fun part is that the same code is working perfectly when I make a post request to this route using Postman without any error.

Please correct my mistake. After adding:

  pushNewPost(newPost) {
    console.log("here is the new post", newPost);
    let headers = new HttpHeaders({
      'Content-Type': 'application/json',
     });
     let options = { headers: headers };
    return this._http.post<any>(this._contributeUrl, newPost);
  }

I'm getting this: