CODEWITHSUNDEEP
node.jsangularpassport.jspassport-google-oauth2passport-github2
Haider Malik
Haider Malik

Reputation: 7

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

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

Upvotes: 1

Views: 1433

Answers (4)

SuperUser Sudo
SuperUser Sudo

Reputation: 295

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']}) );

Upvotes: 1

Prabudda Sri Rahal
Prabudda Sri Rahal

Reputation: 469

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

Upvotes: 1

BrianM
BrianM

Reputation: 949

You could do it like in the image below this

Upvotes: 0

Sanjay
Sanjay

Reputation: 1007

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

Upvotes: 0

Related Questions