Cors issues using Oauth in Nodejs/Angular local app

Question

My settings are the following :

Frontend in Angular: http://localhost:4200
backend in nodejs : localhost:3000

I configured OAuth applications (github, google...) with the backend url (auhorized and callback url)

Then I set up oAuth using passport in nodejs. The frontend only sends http request to the backend when the login button is clicked; the frontend does not communicate with the OAuth provider(is that right ?)

I get the following cors issue:

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Fwww.oshop.com%3A3000%2Fauth%2Fgoogle%2Fcallback&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login&client_id=932090050496-dntdn7u1rg5r9nrm9maqeg1nhm2bc7hs.apps.googleusercontent.com' (redirected from 'http://localhost:3000/auth/google') from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have set up all cors needed headers in my nodejs server but still have the same issue.

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

  res.header("Access-Control-Allow-Origin", "http://localhost:4200");

  res.header("Access-Control-Allow-Credentials", true);

  res.header("Access-Control-Allow-Methods", "GET,POST,DELETE,PUT,OPTIONS");

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization, withCredentials");

  next();
});

Any clues? Thanks,

score -1 · Answer 1 · answered Jun 11 '20 at 18:07

-1

I'd suggest using cors package and add the following code

app.use(cors({ origin: 'http://localhost:4200', credentials: true }));

answered Jun 11 '20 at 18:07

makeze

55
1
1
10

Thank you, this is the same as the middleware I added – hasnaas Jun 13 '20 at 13:22

score -1 · Answer 2 · answered Jun 11 '20 at 18:51

-1

It is a browser redirect so you could redirect to local host:3000 (node) and then do either an ajax call to exchange the response code or do the same in node. If you provide some more information on the issue that you are facing, I might be able to help?

answered Jun 11 '20 at 18:51

Ralph

309
1
8

I don't get it: the app should be automatically redirected after login. But my problem is I don't get the login screen yet – hasnaas Jun 13 '20 at 13:26
Just so that I understand this correctly, Your Flow is this 1.Click Authenticate Button -> 2.Google Authenticate page -> 3. Redirect page (with code) -> 4. Access Token (exchange code for token), and you are stuck with the 1 -> 2, right? – Ralph Jun 13 '20 at 16:19
exactly, I don't reach authentication page – hasnaas Jun 16 '20 at 14:49
Have you given him a button on the page, and is there a place I can have a look at what is happening? – Ralph Jun 16 '20 at 15:20

Cors issues using Oauth in Nodejs/Angular local app

2 Answers2