无法通过JS获取Golang服务器响应的问题求助

你遇到的情况是：直接在浏览器地址栏访问 /address 接口能拿到正常JSON响应，但通过前端fetch请求时，仅得到无头部无数据的响应对象。核心原因通常分为两种，对应解决方案如下：

1. 修复fetch的响应解析逻辑 #

fetch API返回的Response对象只是响应的元数据容器，并非直接的响应内容。你需要主动调用解析方法（如json()）才能获取实际的JSON数据，同时建议先校验响应状态是否正常：

const clickListener = () => {
    console.log('clickListener()')

    fetch("/address")
        .then(response => {
            // 先校验HTTP响应状态是否成功
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            // 解析JSON格式的响应体
            return response.json();
        })
        .then(data => {
            console.log("响应数据：", data); // 这里能拿到实际的{IsAvailable: true, Message: "Available"}
        })
        .catch(e => {
            console.log("请求错误：", e)
        })
}

2. 处理CORS跨域限制 #

如果你的前端页面与Go后端不在同一域名/端口下（比如前端跑在localhost:3000，后端在localhost:8080），浏览器会触发CORS预检请求，此时后端必须处理OPTIONS请求并设置允许跨域的响应头，否则fetch请求会被浏览器拦截，导致响应异常。

修改Go的Handler，添加CORS支持：

import (
    "net/http"
    "encoding/json"
    "log"
)

type jsonResponse struct {
    IsAvailable bool   `json:"IsAvailable"`
    Message     string `json:"Message"`
}

func Handler(writer http.ResponseWriter, request *http.Request) {
    // 设置CORS头部，生产环境建议替换为具体的前端域名，而非*
    writer.Header().Set("Access-Control-Allow-Origin", "*")
    writer.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
    writer.Header().Set("Access-Control-Allow-Headers", "Content-Type")

    // 处理浏览器的OPTIONS预检请求
    if request.Method == http.MethodOptions {
        writer.WriteHeader(http.StatusOK)
        return
    }

    response := jsonResponse{IsAvailable: true, Message: "Available"}

    responseInJsonFormat, err := json.MarshalIndent(response, "", " ")
    if err != nil {
        log.Println("无法将响应转换为JSON格式")
        writer.WriteHeader(http.StatusInternalServerError)
        return
    }

    writer.Header().Set("Content-Type", "application/json")
    _, err = writer.Write(responseInJsonFormat)
    if err != nil {
        log.Println("写入响应失败")
        writer.WriteHeader(http.StatusInternalServerError)
    }
}

额外排查要点 #

• 打开浏览器开发者工具的Network面板，查看fetch请求的状态码、响应头，确认是否存在4xx/5xx错误或CORS相关报错
• 检查Go后端的路由配置，确保/address路径正确映射到了上述Handler
• 确认前端页面与后端接口的域名、端口一致，或已正确配置CORS头部

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