Description
I am experiencing a CORS issue when trying to access an endpoint from a React application running at http://localhost:3000 to a Gin server running at http://localhost:6969. Even though I have added CORS middleware using gin-contrib/cors, I still get the error No 'Access-Control-Allow-Origin' header is present on the requested resource.
How to reproduce
Here is the code used in my Go application:
package main
import (
"bank-back-office-be/config"
"bank-back-office-be/env"
"bank-back-office-be/server/router"
"bank-back-office-be/server/middleware"
"fmt"
"log"
"net/http"
"os"
"github.com/gin-gonic/gin"
"github.com/gin-contrib/cors"
_ "github.com/lib/pq"
)
func init() {
config.LoadEnv()
env.GetEnv()
}
func main() {
gin.SetMode(os.Getenv("GIN_MODE"))
port := env.Port
app := gin.Default()
// Add CORS middleware
app.Use(cors.New(cors.Config{
AllowOrigins: []string{"http://localhost:3000"},
AllowMethods: []string{"POST", "OPTIONS", "GET", "PUT", "PATCH", "DELETE"},
AllowHeaders: []string{"Content-Type", "Authorization"},
ExposeHeaders: []string{"Content-Length"},
AllowCredentials: true,
MaxAge: 12 * time.Hour,
}))
db := config.NewDB()
// HARDCODE
db.SetUserId("532e7219-9ce5-4002-9e03-f9308c2f87c2")
defer db.Close()
router.SetupRoutes(app, db)
server := &http.Server{
Addr: fmt.Sprintf(":%d", port),
Handler: app,
}
log.Printf("Server running on PORT %d", port)
if err := server.ListenAndServe(); err != nil && err != http.ErrServerClosed {
log.Fatal(err)
}
}
package middleware
import (
"bank-back-office-be/env"
"github.com/gin-contrib/cors"
"github.com/gin-gonic/gin"
"time"
)
func getAllowOrigins() []string {
if len(env.AllowOrigins) > 0 {
return env.AllowOrigins
}
return []string{"*"}
}
func getAllowHeaders() []string {
return []string{
"Content-Type",
"Content-Length",
"Accept-Encoding",
"Authorization",
"accept",
"origin",
"Cache-Control",
"clientpath",
}
}
func CORSMiddleware() gin.HandlerFunc {
return cors.New(cors.Config{
AllowOrigins: getAllowOrigins(),
AllowMethods: []string{"POST", "OPTIONS", "GET", "PUT", "PATCH", "DELETE"},
AllowHeaders: getAllowHeaders(),
ExposeHeaders: []string{"Content-Length"},
AllowCredentials: true,
MaxAge: 12 * time.Hour,
})
}
Expectations
My expectation is to access the endpoint successfully without CORS errors:
$ curl http://localhost:6969/v1/help-center/faq
Actual result
However, what I get is the following error:
$ curl -i http://localhost:6969/v1/help-center/faq
HTTP/1.1 307 Temporary Redirect
Location: /v1/help-center/faq
Content-Length: 0
Date: Wed, 31 Jul 2024 12:34:56 GMT
In the React application, I get the following error in the console:
Access to XMLHttpRequest at 'http://localhost:6969/v1/help-center/faq' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST http://localhost:6969/v1/help-center/faq net::ERR_FAILED 307 (Temporary Redirect)
<img width="329" alt="Tangkapan Layar 2024-07-31 pukul 22 38 34" src="https://github.com/user-attachments/assets/3acd327e-cbb5-43df-b630-384c9d4dfeb0">
**Comment From: SoniSuciadi**
<img width="311" alt="Tangkapan Layar 2024-07-31 pukul 22 40 42" src="https://github.com/user-attachments/assets/bfae914b-72e6-4ddc-a639-13b82d0c82fe">
<img width="648" alt="Tangkapan Layar 2024-07-31 pukul 22 41 25" src="https://github.com/user-attachments
/assets/57b930cf-99d4-4a65-9a49-893d0bb0f596">
<img width="546" alt="Tangkapan Layar 2024-07-31 pukul 22 41 36" src="https://github.com/user-attachments/assets/3f92fbcb-7664-4b22-8721-ec63498f9b27">
<img width="556" alt="Tangkapan Layar 2024-07-31 pukul 22 41 55" src="https://github.com/user-attachments/assets/85393958-4704-42af-b677-6f2c6465fa96">
<img width="551" alt="Tangkapan Layar 2024-07-31 pukul 22 42 03" src="https://github.com/user-attachments/assets/45cfa356-4283-4928-823d-41290cf1de18">
**Comment From: JimChenWYU**
Are you sure your react app running at `3000`, and your gin server running at `6969` ?
$ curl -i http://localhost:6969/v1/help-center/faq HTTP/1.1 307 Temporary Redirect Location: /v1/help-center/faq Content-Length: 0 Date: Wed, 31 Jul 2024 12:34:56 GMT
In the React application, I get the following error in the console:
Access to XMLHttpRequest at 'http://localhost:6969/v1/help-center/faq' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST http://localhost:6969/v1/help-center/faq net::ERR_FAILED 307 (Temporary Redirect)
from this log, I guss your react app is running at 6969