I have an API made in Go, and a Front in Angular.
When i ping that url : https://myDomain/v1/users/sign/up Angular is trying to do an OPTIONS request.
I saw on some topics that I have to setup cors in my API, that's what I did:
In my main.go
file:
servMuxApi := http.NewServeMux()
user.SetUserRoute(servMuxApi)
c := cors.SetupCors()
handler := c.Handler(servMuxApi)
if err := http.ListenAndServe(servPort, handler); err != nil {
log.Fatal(err)
}
In the SetUserRoute
function i just have a HandleFunc
:
router.HandleFunc("/v1/users/sign/up", SignUpUser)
SetupCors
function :
func SetupCors() *cors.Cors {
return cors.New(cors.Options{
AllowedOrigins: []string{"http://localhost:8081*", "chrome-extension://coohjcphdfgbiolnekdpbcijmhambjff"},
AllowedMethods: []string{http.MethodGet, http.MethodPost, http.MethodPut, http.MethodPatch, http.MethodDelete, http.MethodOptions},
AllowCredentials: true,
OptionsPassthrough: true,
})
}
}
NB: the chrome extension you see is the Postman extension i use on Chrome.
With all of that set i'm still having errors on the Google Chrome console when i try my Angular front Sign Up form :
OPTIONS https://myDomain/v1/users/sign/up 503
Access to XMLHttpRequest at 'https://myDomain/v1/users/sign/up' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
EDIT: the problem is, that, on the Chrome console, i don't see that Respone
I finally understood the problem. I use CloudFlare (https://www.cloudflare.com) to set some security on my server. But on CloudFlare the "under attack mode" variable was set to "ON" -> Prohibiting every request on my API. After setting this to off, every request work. So the problem didn't come from my API or my Front. My API was well set...
If you use a Reverse Proxy, or some firewalls, please be very careful with your configurations we had a lot of conflicts.
Thank you very much to @Or Yaacov and @mh-cbon for helping me. Hope this answer will help someone.
please add the following allowed headers: (replace the wild card "*" with your app-data headers)
AllowedHeaders: []string{"Content-Type", "Origin", "Accept", "*"},
a full example that compatible with Angular (I used gorilla/mux in the following):
//Start starting the http server
func Start() {
router := NewRouter()
headersOk := handlers.AllowedHeaders([]string{"Content-Type", "Origin", "Accept", "*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"POST", "GET", "DELETE", "OPTIONS"})
http.Handle("/api/", handlers.CORS(headersOk, originsOk, methodsOk)(http.StripPrefix("/api", router)))
panic(http.ListenAndServe(":"+utils.Config.ServerPort, nil))
}
Edit: you should make sure that your response contains all of the "allowed headers" as we defined to the OPTIONS request: