React and Nest.js google auth return CORS Error

Question

I'm using in React of library "react-google-login": "^5.2.2" and in Nest.js: "passport-google-oauth20": "^2.0.0". In Nest.js google auth work correctly, but I have a problem on front-end site. When I click on button "Sign in with Google" and I loggin to google. Google auth return error cors:

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A7000%2Fauth%2Flogin-google%2Fredirect&scope=email%20profile&client_id=XXXXX.apps.googleusercontent.com' (redirected from 'http://localhost:7000/auth/login-google') from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm trying fix this problem by add proxy to React (docs):

File src/setupProxy.js:

const createProxyMiddleware = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    '/auth/login-google',
    createProxyMiddleware({
      target: 'http://localhost:7000',
      changeOrigin: true,
    }),
  )
}

But still I have this same CORS error.

React - http://localhost:3001
Nest.js - http://localhost:7000

How I can fix it?

EDIT:

I found this answer. I change action onClick on button "Sign in with Google" to:

window.location = 'http://localhost:7000/auth/login-google'

Now I don't get CORS error. Nest.js return me data about user (as I wanted, it's work correctly) but I don't know how I can listen in React when user is logged in. Because now when user click "Sign in with Google" (when the user logs in correctly) then the browser redirects to the address:

http://localhost:7000/auth/login-google/redirect?code=4%2F0AY0e-g7UsKrAyhmnc3xQBT3oE9ck9bCfuuO7lX9RJxh9JuRrZfdFPCaVZsRppapRfanGlw&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none

I'm trying using history.location but not work, because it's not address of React.

Oh I think I misunderstood the problem, you are trying to call google apis and you CORS. is that right? — Pouria Moosavi
– Pouria Moosavi, Commented May 16, 2021 at 19:10
I also had such a problem. I could find the answer here: stackoverflow.com/questions/66250525/… — ДимаЭф
– ДимаЭф, Commented Oct 16, 2021 at 9:42

Khanh Nguyen · Accepted Answer · 2023-04-16 01:26:05Z

1

I use NestJS and Angular. This is how I fixed the CORS error. Please do it like this:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cors from 'cors';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(cors({
    origin: 'http://localhost:4200'
  }));
  await app.listen(parseInt(process.env.PORT) || 3000);
}
bootstrap();

Collectives™ on Stack Overflow

React and Nest.js google auth return CORS Error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related