CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200/’

Question

I'm developing an API with ExpressJS, and my plan is to consume its auth routes using an Angular app.

When trying to login, I get the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200/’).

Now, I'm using cors library in my ExpressJS app:

const express = require('express');

require('dotenv').config();
const bp = require('body-parser');
const passport = require('./src/config/auth');
const cors = require('cors');
const userDetails = require('./src/config/userdb');
const auth = require('./src/routes/auth');
const fat = require('./src/routes/calcfat');
const diet = require('./src/routes/calcdiet');

const session = require('express-session');

const app = express();
const port = process.env.PORT;


app.use(session({
  secret: 'keyboard cat',
  resave: false,
  saveUninitialized: false
}));

app.use(bp.urlencoded({ extended: false }));
app.use(bp.json());
app.use(cors({
  origin:'http://localhost:4200/',
  credentials: true
}));

passport.serializeUser((user, done) => {
  done(null, user);
});
passport.deserializeUser((id, done) => {
  done(
    null,
    (id) => userDetails.findOne({id: id})
  );
});

app.use(passport.initialize());
app.use(passport.session());
app.use('/fat', fat);
app.use('/diet', diet);


app.get('/', auth.checkAuthenticated, (req, res) => {
  res.json({content:'Vista de bienvenida'});
});

app.route('/login')
  .get(auth.checkUnauthenticated, (req, res) => {
    res.json({success:false, statusCode:403});
  })
  .post(passport.authenticate('local', { 
    failureRedirect: '/login',
    failureMessage: true
  }),
    (req, res) => {
      res.json({success: true});
  });

app.post('/register', auth.checkUnauthenticated, async (req, res) => {
  var n = await userDetails.count();
  var result = await auth.newuser(req, n);
  res.json({result:result});
});

app.delete("/logout", (req,res) => {
  req.logOut(
    (err) => {
      if (err) { return next(err); }
    });
  console.log(`-------> User Logged out`);
  res.json({success: true});
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

And in my Angular app:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthserviceService {

  constructor(private httpClient:HttpClient) { }

  pruebaApi(solicitud:any) {
    this.httpClient.post(
      'http://localhost:3000/login',
      solicitud,
      {headers:{
        'Access-Control-Allow-Origin': 'http://localhost:3000/'
      },
      withCredentials:true
    }).subscribe(
      response => console.log(response),
      error => console.log(error)
    );
  }
}

The authentication method is passport-local, and everything works fine when making the requests to the API using Postman.

Thanks in advance

CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200/’

0 Answers