Golang Echo框架Content-Type头部问题：Vite React资源加载失败

我有一个简单的Golang Echo应用，原本可正常处理逻辑并返回JSON结果，代码示例如下：

package main

import (
    "net/http"
    
    "github.com/labstack/echo/v4"
)

func main() {
    e := echo.New()

    e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
        Root:   "web",
        Browse: true,
        HTML5:  true,
    }))
    e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
        AllowCredentials: true,
        AllowOrigins:     []string{"*"},
        AllowHeaders:     []string{"Authorization", "Content-Type"},
        AllowMethods:     []string{echo.OPTIONS, echo.GET, echo.HEAD, echo.PUT, echo.PATCH, echo.POST, echo.DELETE},
    }))

    authenticationRoute := e.Group("")
    authenticationRoute.Register(e.Group("/auth"))

    authenticationRoute.GET("/login", s.loginGet)
    e.Logger.Fatal(e.Start(":8080"))
}

func loginGet(echo_context echo.Context) error {
    return echo_context.String(http.StatusOK, "Hello, World!")
}

原本一切正常，但结合ViteJS+ReactJS搭建仪表盘时，页面为空，控制台报错：

Loading module from “http://127.0.0.1/src/main.jsx” was blocked because of a disallowed MIME type (“text/plain”)

我想了解如何根据响应动态修改Content-Type头部？如果统一设为text/javascript，会导致HTML代码无法正常返回，不知该如何处理。

更新2 #

尝试在允许的头部中添加X-Content-Type-Options并设置响应头：

c.Response().Header().Set("X-Content-Type-Options", "nosniff")

以及

AllowHeaders:     []string{"Authorization", "Content-Type", "X-Content-Type-Options"},

但没有效果。

更新3 #

已定位问题，但仍不知如何解决：
ECHO可正常设置自定义头部，但当从HTML中引入main.tsx文件时，ECHO返回该文件时的Content-Type为text/plain，不知如何只为这类文件设置正确的头部。

问题核心是Echo的静态文件中间件默认未给.jsx/.tsx文件配置正确的MIME类型，导致浏览器将其识别为text/plain并拦截。以下两种方法可解决：

方法1：静态中间件自定义MIME映射 #

初始化静态中间件时，通过MIMETypes字段添加扩展名与MIME类型的对应关系：

e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
    Root:   "web",
    Browse: true,
    HTML5:  true,
    MIMETypes: map[string]string{
        ".jsx": "text/javascript",
        ".tsx": "text/javascript",
    },
}))

这样请求.jsx或.tsx文件时，Echo会自动返回text/javascript类型的响应头，同时不影响HTML、其他静态文件的默认MIME设置。

方法2：全局中间件动态修改响应头 #

如果需要更灵活的控制逻辑，可添加一个全局中间件，在响应发送前检查文件扩展名并设置对应Content-Type：

import "path/filepath"

// ...

e.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
    return func(c echo.Context) error {
        // 先执行后续处理逻辑
        if err := next(c); err != nil {
            return err
        }
        
        // 获取请求路径的扩展名
        ext := filepath.Ext(c.Request().URL.Path)
        
        // 针对目标扩展名设置正确的Content-Type
        switch ext {
        case ".jsx", ".tsx":
            c.Response().Header().Set(echo.HeaderContentType, "text/javascript")
        }
        
        return nil
    }
})

注意：这个中间件要放在静态中间件之前注册，确保能在响应发送前完成头部修改。

补充提示 #

• 无需设置X-Content-Type-Options: nosniff，问题根源是MIME类型配置错误，而非浏览器嗅探行为。
• 确认Vite的文件输出路径与Echo静态目录Root: "web"一致，避免因路径错误导致的文件返回异常。

内容的提问来源于stack exchange，提问作者Manish Garotki