2

enter image description here

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

Google Developer's console screenshot

Jens Habegger
  • 5,006
  • 39
  • 57
shyam
  • 49
  • 3
  • _“I initiate a google login from my UI, the passport service then redirects the url to google's login page.”_ - `app.get` is AJAX, but you can not redirect the front-end from a background request. You need to redirect there directly “in” the front-end, without AJAX interfering. – CBroe Jul 30 '18 at 08:00
  • @Jack — Why would having CORS on **a different server** help? It is Google's server that is not granting permission with CORS. – Quentin Jul 30 '18 at 08:48

0 Answers0