Fix CORSError: Access to XMLHttpRequest at 'http://localhost:8080/api/data' from origin 'http://localhost:3000' has been blocked by CORS policy in Gin

This error occurs when your Gin backend does not include the proper Access-Control-Allow-Origin headers, causing the browser to block cross-origin requests from your frontend. Fix it by adding the gin-contrib/cors middleware with the correct allowed origins, methods, and headers for your frontend domain.

Reading the Stack Trace

Here's what each line means:

• github.com/gin-contrib/cors.New.func1(0x14000226000) /go/pkg/mod/github.com/gin-contrib/cors@v1.5.0/cors.go:52 +0x1c8: The CORS middleware rejects the preflight OPTIONS request because the requesting origin is not in the allowed origins list.
• [GIN] 2024/03/15 - 16:00:05 | 403 | 0.204ms | 127.0.0.1 | OPTIONS /api/data: The preflight OPTIONS request returns 403, which tells the browser to block the subsequent actual request.
• github.com/gin-gonic/gin.(*Engine).handleHTTPRequest(0x14000128680, 0x14000226000): Gin routes the OPTIONS request through the middleware chain where CORS policy is enforced.

Common Causes

func main() {
	r := gin.Default()
	// No CORS middleware
	r.GET("/api/data", GetData)
	r.Run(":8080")
}

r.Use(cors.New(cors.Config{
	AllowOrigins: []string{"https://production.example.com"},
	// Missing http://localhost:3000 for development
}))

r.Use(cors.New(cors.Config{
	AllowOrigins: []string{"http://localhost:3000"},
	AllowMethods: []string{"GET", "POST"},
	// Missing AllowHeaders: ["Authorization"]
}))

The Fix

Add the gin-contrib/cors middleware with explicit allowed origins that include your frontend URL. Specify all HTTP methods, headers (including Authorization), and enable credentials if using cookies or auth tokens.

func main() {
	r := gin.Default()
	r.GET("/api/data", GetData)
	r.Run(":8080")
}

func main() {
	r := gin.Default()
	r.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"http://localhost:3000", "https://yourdomain.com"},
		AllowMethods:     []string{"GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"},
		AllowHeaders:     []string{"Origin", "Content-Type", "Authorization"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
		MaxAge:           12 * time.Hour,
	}))
	r.GET("/api/data", GetData)
	r.Run(":8080")
}

Testing the Fix

package main_test

import (
	"net/http"
	"net/http/httptest"
	"testing"

	"github.com/stretchr/testify/assert"
)

func TestCORS_PreflightRequest(t *testing.T) {
	r := setupRouter()

	req := httptest.NewRequest(http.MethodOptions, "/api/data", nil)
	req.Header.Set("Origin", "http://localhost:3000")
	req.Header.Set("Access-Control-Request-Method", "GET")
	w := httptest.NewRecorder()
	r.ServeHTTP(w, req)

	assert.Equal(t, http.StatusNoContent, w.Code)
	assert.Equal(t, "http://localhost:3000", w.Header().Get("Access-Control-Allow-Origin"))
}

func TestCORS_BlockedOrigin(t *testing.T) {
	r := setupRouter()

	req := httptest.NewRequest(http.MethodOptions, "/api/data", nil)
	req.Header.Set("Origin", "http://evil.com")
	req.Header.Set("Access-Control-Request-Method", "GET")
	w := httptest.NewRecorder()
	r.ServeHTTP(w, req)

	assert.Empty(t, w.Header().Get("Access-Control-Allow-Origin"))
}

Run your tests:

go test ./... -v

Pushing Through CI/CD

git checkout -b fix/gin-cors-error,git add main.go,git commit -m "fix: add CORS middleware with allowed origins for frontend",git push origin fix/gin-cors-error

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-go@v5
        with:
          go-version: '1.22'
      - run: go mod download
      - run: go vet ./...
      - run: go test ./... -race -coverprofile=coverage.out
      - run: go build ./...

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

go get github.com/bugstack/sdk

import "github.com/bugstack/sdk"

func init() {
  bugstack.Init(os.Getenv("BUGSTACK_API_KEY"))
}

Deploying the Fix (Manual Path)

1. Run go test ./... locally to confirm CORS is configured correctly.
2. Open a pull request with the CORS middleware addition.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify cross-origin requests work in staging.

Frequently Asked Questions