React Admin对接Golang API时HTTP响应缺失Content-Range头问题

问题分析 #

你已在Golang API中设置Content-Range头，但React-Admin仍提示缺少该头，核心原因可能是CORS配置未暴露该头、空列表场景下头格式不合法，或是响应函数覆盖了已设置的头。

解决方案 #

1. 修正CORS配置，暴露Content-Range头 #

默认cors.AllowAll()不会自动暴露非标准响应头，React-Admin前端需要读取Content-Range处理分页，必须显式配置CORS暴露该头：

import "github.com/rs/cors"

// 替换原AllowAll配置
corsOpts := cors.New(cors.Options{
    AllowedOrigins: []string{"http://localhost:3000"}, // 建议限制为你的前端域名，避免用*
    AllowedMethods: []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},
    AllowedHeaders: []string{"Content-Type", "Authorization"},
    ExposedHeaders: []string{"Content-Range"}, // 关键：允许前端读取这个头
})
handler := corsOpts.Handler(r)

2. 处理空列表的Content-Range格式 #

当用户列表为空时，原代码会生成items 0--1/0的无效格式，React-Admin无法识别，需调整格式：

func GetUsers(w http.ResponseWriter, r *http.Request) {
    var users []api.User
    db.DB.Find(&users)

    totalResources := len(users)
    var contentRange string
    if totalResources == 0 {
        contentRange = "items 0-0/0" // 空列表的合法格式
    } else {
        contentRange = fmt.Sprintf("items 0-%d/%d", totalResources-1, totalResources)
    }
    w.Header().Set("Content-Range", contentRange)

    // 后续转换响应的代码不变
    userResponses := make([]UserResponse, 0)
    for _, user := range users {
        userResponses = append(userResponses, UserResponse{
            ID:          user.ID,
            Username:    user.Username,
            FirstName:   user.FirstName,
            LastName:    user.LastName,
            Position:    user.Position,
            AccessLevel: user.AccessLevel,
        })
    }

    respondWithJSON(w, http.StatusOK, userResponses)
}

3. 检查respondWithJSON函数是否覆盖头 #

确保你的respondWithJSON函数不会重置已设置的响应头，正确实现应保留现有Header后再设置Content-Type：

func respondWithJSON(w http.ResponseWriter, status int, payload interface{}) {
    data, err := json.Marshal(payload)
    if err != nil {
        w.WriteHeader(http.StatusInternalServerError)
        w.Write([]byte("Failed to marshal response"))
        return
    }
    // 不重置Header，仅添加Content-Type
    w.Header().Set("Content-Type", "application/json")
    w.WriteHeader(status)
    w.Write(data)
}

4. 验证DataProvider配置 #

若使用React-Admin的simpleRestProvider，确保配置正确指向API地址：

// dataProvider.ts
import { simpleRestProvider } from 'react-admin';

export const dataProvider = simpleRestProvider('http://your-golang-api-url');

验证步骤 #

1. 重启Golang服务，应用新配置
2. 在浏览器开发者工具的Network面板查看users请求的响应头，确认Content-Range存在且格式合法
3. 刷新React-Admin页面，检查错误是否消失

内容的提问来源于stack exchange，提问作者Kirill Kolesnikov