CORS error in Golang vs. Gin after redirect

php editor Xiaoxin will introduce to you the CORS errors in Golang and Gin after redirection. CORS (Cross-Origin Resource Sharing) is a mechanism for secure data transfer between different domains, however, encountering CORS errors is a common problem when using Golang and Gin frameworks. This article will explain in detail the causes and solutions of CORS errors to help developers better understand and deal with this problem. Whether you are a beginner or an experienced developer, this article can provide you with useful guidance and solutions. Let’s explore CORS errors in Golang and Gin together!

Question content

I'm trying to implement google oauth2 in a web server written in go and gin. I added two new endpoints named /google/sign-in and /google/callback. The first one receives the request and redirects to the google auth url and the second one is called after the user selects a valid google account, verifies the token and creates a jwt for my internal authentication.

Everything is fine, but it's not the case because when I call the first api route I get the cors error:

access to xmlhttprequest at 'https://accounts.google.com/o/oauth2/auth?access_type=online&client_id=xxxxxxxxxxxxx-337ka657nqlo84q6697vv2efsc2vqvm0.apps.googleusercontent.com&redirect_uri=http%3a%2f%2flocalhost%3a3000%2fgoogle%2fcallback&response_type=code&scope=https%3a%2f%2fwww.googleapis.com%2fauth%2fuserinfo.email+https%3a%2f%2fwww.googleapis.com%2fauth%2fuserinfo.profile&state=7e5f86fe352b4563c7d1bd62408285dcbc44e3e26a4f142bbae915279008ece6' (redirected from 'http://localhost:3000/google/sign-in') from origin 'http://localhost:4200' has been blocked by cors policy: response to preflight request doesn't pass access control check: no 'access-control-allow-origin' header is present on the requested resource.

This is my golang code:

r := gin.default()

r.use(cors.new(cors.config{
    alloworigins: []string{"*"},
    allowmethods: []string{"get", "post", "put", "delete", "patch", "options"},
    allowheaders: []string{"origin", "authorization", "content-type", "content-length", "accept-encoding", "x-csrf-token", "baggage", "sentry-trace", "x-user-lang"},
}))

r.post("/google/sign-in", authcontroller.redirecttogoogleauthpage)
r.get("/google/callback", authcontroller.googlesignin)

Authentication Controller

func (a AuthController) RedirectToGoogleAuthPage(c *gin.Context) {
  googleAuthConfig := utils.GetGoogleAuthConfig()
  state := utils.GenerateRandomKey()
  url := googleAuthConfig.AuthCodeURL(state, oauth2.AccessTypeOnline)
  session := sessions.Default(c)
  session.Set(state, state)
  err := session.Save()
  if err != nil {
      c.JSON(http.StatusInternalServerError, a.Errors.InternalError(err.Error()))
      return
  }
  c.Header("X-Auth-State", state)
  c.Redirect(http.StatusTemporaryRedirect, url)
}

In googleauthconfig, the callback url is http://localhost:3000/google/callback, which is added to the google cloud oauth credentials.

I know I'm missing access-control-allow-origin in the callback request, but how do I add that header?

Solution

According to the information in the question, you are accessing the http://localhost:4200 page and requesting a request to http://localhost:3000 /google/sign-in Sends an AJAX request, which will redirect to https://accounts.google.com/o/oauth2/auth. This won't work. You need to redirect the page to https://accounts.google.com/o/oauth2/auth.

There are two options to solve this problem:

• Modify the client code to replace the AJAX request with a form request (using 076c157479602e1f1ab08a1598864165 element). In this case, c.JSON in RedirectToGoogleAuthPage should be replaced with something else.

• Or modify RedirectToGoogleAuthPage to respond with JSON content containing the target URL to redirect to, and modify the client code to redirect the page to the target URL (using window .location = targetURL).

It looks like the second option requires less changes to the code.

The above is the detailed content of CORS error in Golang vs. Gin after redirect. For more information, please follow other related articles on the PHP Chinese website!