ReactJS用Axios请求Go Chi接口报CORS跨域错误，已配头仍失效如何解决？

开发者阿泽

2026-10-4

问题排查与修复方案

第一，前端错误添加了响应头属性：Access-Control-Allow-Origin是服务端返回的响应头，前端请求中添加该字段无意义，还会触发额外的预检校验。
第二，Go服务未处理OPTIONS预检请求：你请求带了自定义的code请求头，属于非简单跨域请求，浏览器会先发送OPTIONS方法的预检请求确认跨域权限，当前你的路由仅绑定了GET方法，OPTIONS请求无法进入处理逻辑，拿不到对应的跨域响应头导致预检失败。
第三，缺少允许自定义请求头的响应配置：即使返回了允许源的头，没有配置Access-Control-Allow-Headers允许code头，预检校验依然会失败。

修复步骤

前端代码修改

删除请求中多余的Access-Control-Allow-Origin头：

axios.defaults.headers.post['Content-Type'] ='application/x-www-form-urlencoded';
axios.get('http://localhost:8080/api/connection/getToken', {  
    headers: {
         code: code,
        } 
}).then(res => console.log(res));

后端Go代码修改

新增CORS中间件统一处理跨域逻辑，同时绑定到路由：

先定义CORS中间件：

func corsMiddleware(next http.Handler) http.Handler {
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        // 开发环境可使用*，生产环境替换为实际前端地址如http://localhost:3000
        w.Header().Set("Access-Control-Allow-Origin", "*")
        w.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE")
        // 允许自定义的code请求头
        w.Header().Set("Access-Control-Allow-Headers", "Content-Type, code")
        // 预检请求直接返回204状态码
        if r.Method == http.MethodOptions {
            w.WriteHeader(http.StatusNoContent)
            return
        }
        next.ServeHTTP(w, r)
    })
}

将中间件挂载到Chi路由：

func ConnexionRoutes() *chi.Mux {
    router := chi.NewRouter()
    // 注册CORS中间件
    router.Use(corsMiddleware)
    router.Get("/getToken", connectInit)
    return router
}