Next.js调用Golang Gin接口时Fetch请求报错问题排查

我写了一个简单的Golang Gin接口，代码片段如下：

...
router.GET("/ping", func(c *gin.Context) {
    c.Header("Content-Type", "application/json")
    c.JSON(http.StatusOK, gin.H{
        "resp": "pong",
    })
})
...

通过浏览器访问http://127.0.0.1:8080/ping能正常看到响应，用curl命令：

curl http://127.0.0.1:8080/ping
{"resp":"pong"}% 

也能正常拿到结果。但在Next.js里用fetch请求这个接口时：

...    
const response = await fetch('http://127.0.0.1:8080/ping', {
  method: 'GET',
  mode: 'no-cors',
})

console.log("response",response)
const data = await response.json() // 这里控制台报错：Uncaught (in promise) SyntaxError: Unexpected end of input 
...

开发者工具网络标签显示：

Failed to load response data: No data found for resource with given identifier

请问哪里操作错了？

解决方案 #

• 核心问题是你设置了mode: 'no-cors'，这个模式下浏览器会限制读取响应内容——即使请求实际成功，也无法访问response的body，所以调用response.json()会触发解析错误。
• 正确做法是去掉mode: 'no-cors'，同时在Gin接口中配置CORS跨域支持（因为Next.js页面运行在浏览器端，跨域请求需要服务端明确允许）。

具体步骤 #

1. 修改Next.js的fetch代码，移除mode: 'no-cors'：

...    
const response = await fetch('http://127.0.0.1:8080/ping', {
  method: 'GET',
})

console.log("response",response)
const data = await response.json()
...

2. 给Gin接口添加CORS中间件：
   先安装Gin官方的cors中间件：

go get github.com/gin-contrib/cors

然后在代码中配置（允许本地Next.js的域名，假设Next.js运行在3000端口）：

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

func main() {
    router := gin.Default()
    // 配置CORS规则
    router.Use(cors.New(cors.Config{
        AllowOrigins: []string{"http://localhost:3000"},
        AllowMethods: []string{"GET", "POST", "PUT", "DELETE"},
        AllowHeaders: []string{"Origin", "Content-Type"},
    }))

    router.GET("/ping", func(c *gin.Context) {
        c.JSON(http.StatusOK, gin.H{
            "resp": "pong",
        })
    })

    router.Run(":8080")
}

配置完成后，Next.js的fetch请求就能正常读取接口返回的JSON数据了。

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