Integrating Tus Resumable File Upload Protocol with Gin-Gonic CORS issue

Question

I have looked at the similar questions here related to CORS issues with Gin and Tus; none addresses the problem I am currently having.

The current implementation works with the standard net/http package by adding a small wrapper.

// The wrapping function
func enableCors(w *http.ResponseWriter) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
}


// Simplified version of the code
composer := tusd.NewStoreComposer()
    store.UseIn(composer)

    handler, err := tusd.NewHandler(tusd.Config{
        BasePath:              "/files/",
        StoreComposer:         composer,
        NotifyCompleteUploads: true,
    })

    if err != nil {
        panic(fmt.Errorf("Unable to create handler %s", err))
    }

    go func() {
        for {
            fmt.Println("Waiting for upload to complete")
            event := <-handler.CompleteUploads
            fmt.Printf("Uploads %s finished\n", event.Upload.Storage)
        }
    }()

    http.Handle("/files/", func(next http.Handler) http.Handler {
        return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
            enableCors(&w)
            next.ServeHTTP(w, r)
        })
    }(http.StripPrefix("/files/", handler)))


    err = http.ListenAndServe(":8080", nil)
    if err != nil {
        panic(fmt.Errorf("unable to listen: %s", err))
    }
    

Here is what I have tried with Gin. I wrapped the handler in gin.WrapH(). I added the default Gin CORS library middleware, and still, the cors error refused to go away. This is not working

func TusHandler() http.Handler {

    store := filestore.FileStore{
        Path: "./uploads",
    }

    composer := tusd.NewStoreComposer()
    store.UseIn(composer)

    handler, err := tusd.NewHandler(tusd.Config{
        BasePath:              "/upload/tus/",
        StoreComposer:         composer,
        NotifyCompleteUploads: true,
    })

    if err != nil {
        panic(err) // This is to simplify the code
    }

    return handler

}

// The routing
import "github.com/gin-contrib/cors"

router :=  gin.Default()
router.Use(cors.Default())
router.GET("/upload/tuts", gin.WrapH(uploader.TusHandler()))

Here is my browser output. When I tried to upload a file pointing to the Gin version

The gin integration keep showing CORS error. That is the problem I am trying to solve.

Answer 1

tus.io is sending a bunch of headers to the server so you need to add these headers to your cors config. The error message is saying that a header called tus-resumable is not allowed, you need to add this header along with other headers tus.io is sending. And expose some headers so tus-js-client can read it.

router.Use(cors.New(cors.Config{
        AllowAllOrigins: true,
        // AllowOrigins:  []string{"http://example.com"},
        AllowMethods:  []string{"GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"},
        AllowHeaders:  []string{"Authorization", "X-Requested-With", "X-Request-ID", "X-HTTP-Method-Override", "Upload-Length", "Upload-Offset", "Tus-Resumable", "Upload-Metadata", "Upload-Defer-Length", "Upload-Concat", "User-Agent", "Referrer", "Origin", "Content-Type", "Content-Length"},
        ExposeHeaders: []string{"Upload-Offset", "Location", "Upload-Length", "Tus-Version", "Tus-Resumable", "Tus-Max-Size", "Tus-Extension", "Upload-Metadata", "Upload-Defer-Length", "Upload-Concat", "Location", "Upload-Offset", "Upload-Length"},
    }))

Also if you already have a running app, you can use NewUnroutedHandler instead of NewHandler.

handler := dTusHandler()
router.POST("/files/", gin.WrapF(handler.PostFile))
router.HEAD("/files/:id", gin.WrapF(handler.HeadFile))
router.PATCH("/files/:id", gin.WrapF(handler.PatchFile))
router.GET("/files/:id", gin.WrapF(handler.GetFile))

Here's dTusHandler func:

func dTusHandler() *tusd.UnroutedHandler {
    store := filestore.FileStore{
        Path: "./uploads",
    }

    composer := tusd.NewStoreComposer()
    store.UseIn(composer)

    h, err := tusd.NewUnroutedHandler(tusd.Config{
        BasePath:              "/files/",
        StoreComposer:         composer,
        NotifyCompleteUploads: true,
    })

    if err != nil {
        panic(fmt.Errorf("Unable to create handler: %s", err))
    }

    go func() {
        for {
            event := <-h.CompleteUploads
            fmt.Printf("Upload %s finished\n", event.Upload.ID)
        }
    }()

    return h

}

Answer 2

In asp net 6 I fixed this with:

// Default CORS Policy
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        policyBuilder =>
        {
            policyBuilder.AllowAnyOrigin()
                .AllowAnyHeader()
                .AllowAnyMethod()
        .WithExposedHeaders(CorsHelper.GetExposedHeaders());
        });
});