本文详解如何在基于 Kami 路由器的 Go 服务中安全启用 CORS，重点解决带 Basic Auth 凭据的跨域请求问题，涵盖 rs/cors 集成、Origin 动态校验、Credentials 兼容性配置及常见静默失败规避策略。
本文详解如何在基于 kami 路由器的 go 服务中安全启用 cors，重点解决带 basic auth 凭据的跨域请求问题，涵盖 `rs/cors` 集成、origin 动态校验、credentials 兼容性配置及常见静默失败规避策略。
在使用 Kami 构建的 Go Web 服务中处理跨域请求时，不能仅靠手动设置响应头——尤其当前端需携带认证凭据（如 Basic Auth 或 Cookie）时，浏览器会强制执行 CORS 规范中的硬性约束：Access-Control-Allow-Origin 不得为 *，且必须与请求 Origin 精确匹配；同时 Access-Control-Allow-Credentials: true 必须显式声明。若违反此规则（例如 AllowCredentials: true 与 AllowedOrigins: {"*"} 共存），浏览器将静默丢弃整个响应，Network 面板中甚至看不到完整请求，仅显示 401 或 CORS error，这正是提问者遇到的核心问题。
幸运的是，Kami 作为轻量级 HTTP 路由器，天然支持中间件链式调用，可无缝集成成熟的 CORS 中间件库。推荐使用 rs/cors（而非已归档的 gorilla/handlers），因其专为标准 http.Handler 设计、维护活跃、API 清晰，且对 Credentials 场景有严格校验。
✅ 正确集成 rs/cors 到 Kami 的步骤
首先安装依赖：
go get github.com/rs/cors
然后在 main() 函数中，在 kami.Serve() 之前，创建 CORS 实例并注册为全局中间件（作用于 /api/ 路径前缀）：
import "github.com/rs/cors"
func main() {
// ... 数据库初始化、kami.Context 设置等 ...
// ✅ 关键：配置 CORS —— 明确指定受信任源 + 启用凭据
corsHandler := cors.New(cors.Options{
AllowedOrigins: []string{"https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4"}, // 生产环境替换为实际域名，如 "https://myapp.com"
AllowCredentials: true, // 必须为 true 才能发送 Authorization 头或 Cookie
AllowedMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
AllowedHeaders: []string{"Accept", "Content-Type", "Authorization", "X-CSRF-Token"},
// 可选：暴露自定义响应头供前端读取
// ExposedHeaders: []string{"X-Total-Count", "X-Request-ID"},
})
// ✅ 将 CORS 中间件注入 Kami 路由链（注意：必须放在所有路由注册之前）
kami.Use("/api/", corsHandler.Handler)
// ✅ 基础认证中间件（保持原有逻辑）
kami.Use("/api/", httpauth.SimpleBasicAuth(os.Getenv("BASIC_USERNAME"), os.Getenv("BASIC_PASSWORD")))
// ✅ 定义路由（顺序重要：CORS 和 Auth 中间件需在路由之前注册）
kami.Get("/api/v1/systems", func(ctx context.Context, w http.ResponseWriter, r *http.Request) {
// 响应逻辑（无需手动设 CORS 头！）
systems := []alpha.System{}
systemsMap := map[string][]alpha.System{}
err := systemsC.Find(nil).All(&systems)
if err != nil {
log.Println(err.Error())
http.Error(w, err.Error(), http.StatusNotFound)
return
}
systemsMap["systems"] = systems
w.Header().Set("Content-Type", "application/json")
if err := json.NewEncoder(w).Encode(&systemsMap); err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
})
kami.Serve()
}⚠️ 关键注意事项与避坑指南
-
中间件注册顺序至关重要：
kami.Use()的调用必须在所有kami.Get/Post等路由注册之前，否则中间件无法拦截对应路径请求。 - *
AllowCredentials: true时AllowedOrigins绝不可含 `**：这是 W3C 强制规范。若需多源支持，必须显式列出所有合法源（如[]string{"https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4", "https://staging.myapp.com"}`），或使用AllowedOriginFunc动态校验：AllowedOriginFunc: func(origin string) bool { // 例如：从数据库查询白名单，或匹配正则 return origin == "https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4" || strings.HasSuffix(origin, ".myapp.com") }, -
预检（OPTIONS）请求自动处理：
rs/cors内置完整预检逻辑，无需手动判断r.Method == "OPTIONS"或调用w.WriteHeader(http.StatusNoContent)—— 这是手写中间件易错点，而rs/cors已彻底规避。 -
Header 设置时机无风险：
rs/cors在Handler入口即注入所有 CORS 头，确保在w.WriteHeader()之前完成，避免因响应流已启动导致 Header 失效。 -
生产环境加固建议：
- 禁用
cors.Default()（它隐式设MaxAge: 0，导致每次请求都触发预检）； - 使用
ExposedHeaders显式声明需被前端 JS 读取的响应头（如分页总数X-Total-Count）； - 若部署在 Nginx 后，需透传 CORS 头：
add_header 'Access-Control-Allow-Origin' '$sent_http_access_control_allow_origin' always;。
- 禁用
通过以上配置，你的 React 应用（https://www.php.cn/link/8e5687e2d6ab87e5da2f833f3e8986a4）即可成功向 http://localhost:8000/api/v1/systems 发起带凭据的跨域请求，且完全符合浏览器安全规范。记住：CORS 不是安全机制，而是明确授权声明——正确配置它，才能让前后端在同源策略下安全协作。
