CORS issue when trying to access an endpoint from a React application 😱

[SoniSuciadi]

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)

![Tangkapan Layar 2024-07-31 pukul 22 38 11](https://github.com/user-attachments/assets/dadf7b85-a340-47d4-a794-853c785971c9)
<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">

[SoniSuciadi]

[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)

![Tangkapan Layar 2024-07-31 pukul 22 38 11](https://github.com/user-attachments/assets/dadf7b85-a340-47d4-a794-853c785971c9)
<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">

from this log, I guss your react app is running at 6969