添加Vue HTTP标头时出错

Question

I have a working application with a front end in vuejs and a backend in go. I'm in the process of adding the final features to the authentication and I'm running into an error.

When I try to add any http header to the vuejs request I get an error.

This is what I'm adding to the vue component:

http: {
  headers: {
    Authorization: 'Bearer 123'
  }
}

And I'm getting a preflight error:

XMLHttpRequest cannot load http://localhost:8000/api/investments?limit=6. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

Now I know this is usually a server side problem but I am adding the response header resp.Header().Set("Access-Control-Allow-Origin", "*"). cors. If I remove the the http property in the vue object everything works fine. Its pretty bizzare I even tried handling the OPTIONS request with go but my handler for the api doesn't even get hit.

Answer 1

Ok so I found the answer it is a server problem the Authorization header was not authorized. So just add it as a middleware to allow for it.

c := cors.New(cors.Options{
        AllowedHeaders: []string{"Origin", "Accept", "Content-Type", "Authorization"},
    })
handler := c.Handler(router)
log.Fatal(http.ListenAndServe(":8000", handler))

I am using the rs/cors package