Javascript 在kami制作的golang服务器中使用CORS

Javascript 在kami制作的golang服务器中使用CORS,javascript,rest,reactjs,go,cors,Javascript,Rest,Reactjs,Go,Cors,您好,我正在尝试从运行在localhost:3000上的ReactJS web应用程序访问运行在localhost:8000上的Golang api上的GET请求。但每当我尝试这样做时,就会出现以下错误: Fetch API cannot load http://localhost:8000/api/v1/systems. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '

您好,我正在尝试从运行在localhost:3000上的ReactJS web应用程序访问运行在localhost:8000上的Golang api上的GET请求。但每当我尝试这样做时,就会出现以下错误:

Fetch API cannot load http://localhost:8000/api/v1/systems.
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 401. 
If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 
下面是我的Go服务器代码的一个片段:

func main() {
    session, err := mgo.Dial(mongoURI())
    if err != nil {
        log.Fatal(err)
    }
    defer session.Close()

    systemsC := session.DB("").C("systems")

    flag.Parse()
    ctx := context.Background()
    kami.Context = ctx

    kami.Use("/api/", httpauth.SimpleBasicAuth(os.Getenv("BASIC_USERNAME"), os.Getenv("BASIC_PASSWORD")))

...

    kami.Get("/api/v1/systems", func(ctx context.Context, w http.ResponseWriter, r *http.Request) {
        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(), 404)
        }
        systemsMap["systems"] = systems

        err = json.NewEncoder(w).Encode(&systemsMap)
        if err != nil {
            http.Error(w, err.Error(), 500)
        }
        w.Header().Set("Content-Type", "application/json")
    })

    kami.Serve()
}
下面是我用来发出GET请求的ReactJS代码:

componentDidMount() {
    fetch('http://localhost:8000/api/v1/systems') 
    .then(function(response) {
        return response.json()
    }).then(function(data) {
        this.setState({ data }, () => console.log(this.state));
    });
}
完整的URL需要凭据:
http://user:password@本地主机:8000/api/v1/systems

我已尝试向.Get函数添加各种标题,但始终出现相同的错误:

w.Header().Set("Access-Control-Allow-Origin", "*") //This header doesn't work when credentials are sent
我也尝试了这些方法,但没有效果:

w.Header().Set("Access-Control-Allow-Origin", r.Header.Get("Origin"))
w.Header().Set("Access-Control-Allow-Methods", "POST, GET, DELETE")
w.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
现在我正在尝试使用,但不确定如何将其添加到我的代码中。我是否只需要这3行代码:

mux := http.NewServeMux()
handler := cors.Default().Handler(mux)
http.ListenAndServe(":8080", handler)
不太清楚如何混合mux、kami和cors,非常感谢您的帮助,谢谢

编辑


也许一个更简单的问题是,如果有人知道如何与集成。我想这可以解决我的问题,只是不知道如何一起使用它们。

我只需要创建一个cors对象,并将其处理程序作为中间件传递给kami:

c := cors.New(cors.Options{
    AllowedOrigins: []string{"http://localhost:3000"},
    AllowCredentials: true,
})

kami.Use("/api/", c.Handler)
现在让我提出请求