[Passportjs][Angular5] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access

Question

I am trying to integrate Nodejs backend api with Angular. I have implemented passpor-google, passport-github, passport-twitter strategy on the backend application.

My backend App url is http://localhost:3000 My Frontend App url is http://localhost:4200

Passport Routes

authRouter.get('/github', passport.authenticate('github'));
authRouter.get(
  '/github/callback',
  passport.authenticate('github', {
    failureRedirect: 'http://localhost:4200/login',
  }),
  authController.sendJWTToken
);

When i send request from the frontend app it gives me CORS error

AuthService.ts

githubAuth(): Observable<LoginRsp> {
    return this.httpClient.get<LoginRsp>(
      `${environment.api_url}/auth/github`
    );
  }

I have already added CORS on my Nodejs project. How can I resolve this issue please help me

Answer 1

use cors module cors or else use express cors middleware express cors

app.use(cors()); after this any other routes

const users = require('./routes/users');

or try moving cors middleware to top

Answer 2

You could do it like in the image below

Answer 3

You can simply write in your html template

<a href="http://localhost:3000/login/google">Google</a>

and on the backend you just need to have this

app.get('/login/google',  passport.authenticate('google', { scope: ['profile','email']}) );

Answer 4

In AuthService.ts just use window.location.href='{environment.api_url}/auth/github'