Google OAuth CORS issue w/ flask-dance

Question

I am setting up a flask-dance + flask-login project and am having issues with CORS. Specifically, I follow the standard flask-dance setup for Google OAuth:

google_blueprint = make_google_blueprint(
    client_id=constants.GOOGLE_CLIENT_ID,
    client_secret=constants.GOOGLE_CLIENT_SECRET,
    scope=["profile", "email"]
)
app.register_blueprint(google_blueprint, url_prefix="/b/google_login")

On the frontend, I make a GET request to {backend}::/b/google_login/google, but get the following error:

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=xxx&redirect_uri=http%3A%2F%2Flocalhost%3A5001%2Fb%2Fgoogle_login%2Fgoogle%2Fauthorized&scope=profile+email&state=xxx' (redirected from 'http://localhost:5001/b/google_login/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 added the redirect URI (i.e. /b/google_login/google/authorized to the redirect-URI whitelist). I am confused why this error is happening - as I am proxying the OAuth redirect through my server.

When I attempt the flow through window.href = http://localhost:5001/b/google_login/google - the flow works without issue.

Anyone have any idea why this is happening?

Answer 1

You could call CORS and pass your Flask object that way. It is as some in the comments have pointed out really janky and unsecure as it would enable CORS for your entire application.

I'm dealing with a similar issue on a different application where I'm passing some data between domains for an emergency alert system. In my case I'm using a jsonpCallback and Ajax to pass data between the domains.