0

I'm trying to set up Google OAuth2 on a website

I have a frontend React app made using create-react-app running on localhost:3000, and a backend Kotlin app using Ktor running on localhost:8080.

The following flow takes place:

  1. The user clicks a button on the React frontend, which makes a call to the backend using Fetch to localhost:8080/login.
  2. The backend responds with a redirect to the sign in with Google OAuth2 page.
  3. The frontend tries to follow this redirect.
  4. The request then fails with the error - [Error] 01:02:41.890 Origin null is not allowed by Access-Control-Allow-Origin. Status code: 200

Here is an image of the request, the redirect response and the following request:

Redirect response and request

As shown, the origin is null. From reading I understand this may be a privacy feature to protect the location of the backend, but how can this be fixed?

Tried manually setting the Origin header to wildcard or a domain, but neither resolved the issue.

user3371750
  • 123
  • 4
  • For cross-origin redirects, browser set the `Origin` header as `null`. There's nothing you can do about that other than trying to avoid the redirect in the first place. Whatever you do, never allow the `null` origin in your CORS configuration, as doing so is very insecure. – jub0bs Apr 23 '23 at 16:24
  • Does this answer your question? [Access to fetch at https://accounts.google.com/o/oauth2/v2/auth has been blocked by CORS](https://stackoverflow.com/questions/72382892/access-to-fetch-at-https-accounts-google-com-o-oauth2-v2-auth-has-been-blocked) – Heiko Theißen Apr 24 '23 at 14:30

0 Answers0