I am making simple google Oauth sign in button using react, and node+express. react server - 3000 node - 5000
now, I have defined the routes for sign-in in server.js and in react index.js I am making a get request on that route
SERVER app.js
app.get('/auth/google',
passport.authenticate('google', { scope: ['profile'] }));
app.get('/auth/google/welcome',
passport.authenticate('google', { failureRedirect: '/erro' }),
function(req, res) {
// Successful authentication, redirect home.
res.redirect("/welcome");
// res.send("Hello");
});
REACT index.js
const url = "http://localhost:5000/auth/google";
const handleit = async () => {
const data = await Axios.get(url,{
mode:"cors"
})
.then(function (response) {
console.log(response.data);
});
};
return (
<div>
<h2>Hello</h2>
<button onClick={handleit}>Sign in </button>
</div>
);
}
in my google developer console, I have defined the javascript origin URL and callback URL for both the ports. and whenever I click on the sign-in button it shows this error
Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Fgoogle%2Fwelcome&scope=profile&client_id=782132931351-lb3im7qg19k9fh7ml711meld1nugur5j.apps.googleusercontent.com' (redirected from 'http://localhost:5000/auth/google') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have searched everywhere but not able to remove this error and get the google sign in prompt, please help