I am developing my front-end in Angular5 and server in node.js. I have deployed my web application on Heroku. I am using passport package to use google's OAuth services. I initiate a google login from my UI, the passport service then redirects the url to google's login page. My browser then makes a get request to the google's login page. But the response that comes from google's server doesn't have 'Access-Control-Allow-Origin' header due to which my browser throws an error. If I load the redirect URL into separare browser window, the google's login page gets launched without any error. I have tried out several things after consulting a couple of related posts on strack overflow, but my problem is not solved. Below I am posting my code as well as the browser's output from the console logs as well as network logs. Any help will be highly appreiciated. Also I am attaching a link to developer's console screenshot where I have properly set the 'Authorized Javascript Origins' and 'Authorized redirect URIs' values. Also my Application restrictions and API restrictions are set to none.
Errors logged on the browser's console
/login:1 Failed to load https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=https%3A%2F%2Fquiet-spire-72731.herokuapp.com%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id=302157935568-ansqo7lh6f630gbdfb9pqjukivpjcfuh.apps.googleusercontent.com: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://quiet-spire-72731.herokuapp.com' is therefore not allowed access.
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=https%3A%2F%2Fquiet-spire-72731.herokuapp.com%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id=302157935568-ansqo7lh6f630gbdfb9pqjukivpjcfuh.apps.googleusercontent.com with MIME type text/html.
Network logs
General
Request URL: https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=https%3A%2F%2Fquiet-spire-72731.herokuapp.com%2Fauth%2Fgoogle%2Fcallback&scope=profile%20email&client_id=302157935568-ansqo7lh6f630gbdfb9pqjukivpjcfuh.apps.googleusercontent.com
Request Method: GET
Status Code: 200
Remote Address: 172.217.163.45:443
Referrer Policy: no-referrer-when-downgrade
Response Headers
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-language: en-US
content-type: text/html; charset=utf-8
expires: Mon, 01 Jan 1990 00:00:00 GMT
pragma: no-cache
Request Headers
Provisional headers are shown
Accept: application/json, text/plain, */*
Origin: https://quiet-spire-72731.herokuapp.com
Referer: https://quiet-spire-72731.herokuapp.com/login
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
X-DevTools-Emulate-Network-Conditions-Client-Id: 4E1286E843A1BC873CD3A21760F31EF0
Query string Parameters
response_type: code
redirect_uri: https://quiet-spire-72731.herokuapp.com/auth/google/callback
scope: profile email
client_id: 302157935568-ansqo7lh6f630gbdfb9pqjukivpjcfuh.apps.googleusercontent.com
Angular code for login. Ignore UserInfoResObject. Its just a class type defined by me to store received user respone.
googleLogin() : Observable<{}|ContactUsInfoResObject>{
console.log("googleLogin called");
let url = this.serverUrl + "/auth/google";
return this.httpClient.get<UserInfoResObject>(url).pipe(
catchError(this.handleError)
);
}
Server side code for google OAuth routes
//I am using bodyparser as the middleware
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.get(
'/auth/google',
passport.authenticate('google', {
scope: ['profile', 'email']
})
);
app.get(
'/auth/google/callback',
passport.authenticate('google',{ failureRedirect: '/login' },
(req, res) => {
let response = new ResponseObj(statusType.success, "", req.user);
res.send(response);
})
);