0

I have a Flask API which is returning valid JSON, but the Vue3 front end which fetches from the endpoint is returning error:

Access to fetch at 'https://accounts.google.com/o/oauth2/auth?response_type=code&
    client_id=*******' (redirected from 'https://127.0.0.1:7070/') 
    from origin 'http://localhost:5173' has been blocked by CORS policy: 
    enter code here    The 'Access-Control-Allow-Origin' header has a value 
    'http://localhost:5173' that is not equal to the supplied origin. Have 
    the server send the header with a valid value, or, if an opaque response 
    serves your needs, set the request's mode to 'no-cors' to fetch the 
    resource with CORS disabled.

The API calls the Google Calendar API to retrieve events, so it goes through the authentication process.

Error appears to relate to calling "auth_uri":"https://accounts.google.com/o/oauth2/auth"

The API in both the init file and the application file, I have included:

from flask_cors import CORS
CORS(app)

Why would the front end encounter this issue, if the endpoint returns fine on its own?

Any suggestions on how to resolve this?

Steven Diffey
  • 73
  • 1
  • 7
  • According to this [possibly related post](https://stackoverflow.com/a/72392743) *(based on the type of error you're getting)*, the authentication flow must happen in a [visible browsing context](https://html.spec.whatwg.org/multipage/browsers.html#windows), not with a fetch request. In other words: You must **navigate the actual current browser tab to (or open a new tab at)** http://localhost:5173, the tab will then be redirected to `https://accounts.google.com/o/oauth2/v2/auth...` and this page becomes visible, then user will perform the authentication via their Google account. – SputnikDrunk2 Aug 01 '23 at 15:24
  • Are you specifically authenticating from the background using the fetch request? – SputnikDrunk2 Aug 01 '23 at 15:24

0 Answers0