CODEWITHSUNDEEP
reactjsgocors
Olalekan
Olalekan

Reputation: 195

Cors Error When I do a redirect from the server

I have a server running on localhost:8090, which I make a request to from a React App running on localhost:3000 . The aim of this request is to perform some operations and when it is done, it does a redirect to https://www.google.com/ from the backend. This is what it looks like.

Frontend:

function processReq() {
  fetch(`http://localhost:8090/some-process`,
    {
      method: "GET",
      headers: {
        Accept: "application/json",
      }
    }
  )
  .then(response => {
      console.log(response);
    }).catch(err => console.log(err))
}

Backend

r.GET("/some-process", handlers.DoProcess)

func DoProcess(c *gin.Context) {

    // processes request
    var w http.ResponseWriter = c.Writer

    http.Redirect(w, c.Request, "https://www.google.com", http.StatusSeeOther)
}

All of these works well, but I get a Cors error that looks like this

Access to fetch at 'https://www.google.com/' (redirected from 'http://localhost:8090/some-process') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Mind you, I have setup cors on my backend and it looks something like this


func CORS() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Accept, Origin, Cache-Control, X-Requested-With")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "*")

        if c.Request.Method == "OPTIONS" {
            c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
            c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
            c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Accept, Origin, Cache-Control, X-Requested-With")
            c.Writer.Header().Set("Access-Control-Allow-Methods", "*")
            c.AbortWithStatus(204)
            return
        }

        c.Next()
    }
}```

Upvotes: 2

Views: 2700

Answers (2)

Richard Scarrott
Richard Scarrott

Reputation: 7033

The reason you're seeing cors errors is because google is not returning permissible access control headers.

The more fundamental issue is you're trying to redirect the browser as part of a fetch request which won't work; if google did allow cross origin access, you would just be returning the HTML response in your fetch call which isn't that useful.

Instead, you should just return a 200 in your server response and have the client redirect the browser window to google.

function processReq() {
  fetch(`http://localhost:8090/some-process`,
    {
      method: "GET",
      headers: {
        Accept: "application/json",
      }
    }
  )
  .then(response => {
      console.log(response);
      window.location.href = 'https://google.com';
    }).catch(err => console.log(err))
}

Upvotes: 0

Heiko Theißen
Heiko Theißen

Reputation: 16666

Your situation is similar to the one described in the answer to Mongoose redirect not waiting for findByIDAndDelete.

Instead of letting the server respond with a redirect, let it respond with 200 OK and have the client execute

location.href = "https://www.google.com";

when it receives this response.

Upvotes: 1

Related Questions