axios cannot override host when making HTTP GET request to traefik reverse proxy

Question

Context: I'm using traefik as my reverse proxy to send HTTP requests to my backend Golang server, which I've added some CORS handling. It works from Postman and when I'm cURLing the HTTP GET request

Problem: I'm getting this 404 error on the browser:

Axios call overriding Host

axios.create({
  baseURL: 'http://localhost',
})

axios.defaults.headers['Host'] = 'dev.docker.local'

got this error in the console

refused to set unsafe header "Host"

Axios call overriding default Host using X-Host-Override

axios.create({
  baseURL: 'http://localhost',
})

axios.defaults.headers['X-Host-Override'] = 'dev.docker.local'

Axios call setting default headers - seems like it's always using localhost as the Host

axios.create({
  baseURL: 'http://localhost',
  headers: {'Host': 'dev.docker.local'}
})

set CORS in route handlers

func About(w http.ResponseWriter, r *http.Request) {
    w.Header().Set("Content-Type", "application/json; charset=utf-8")
    w.Header().Set("Access-Control-Allow-Methods", "OPTIONS, GET")
    w.Header().Set("Access-Control-Allow-Origin", "*")
    w.Header().Set("Access-Control-Allow-Headers", "*")

    aboutStruct := about{
        Name: "Hello world",
    }
    w.WriteHeader(http.StatusOK)
    j, _ := json.Marshal(aboutStrcut)
    w.Write(j)
}

The 404 shown in i.stack.imgur.com/Pgews.png is for the CORS preflight OPTIONS request that the browser automatically makes on its own. The purpose for the preflight in this specific case is that the browser is asking the server for the http://localhost/api/about endpoint if it allows cross-origin requests with the x-host-override header. But the http://localhost server is for some reason responding to that request with a 404 — and not including and Access-Control-Allow-* headers in that response, because like most servers it probably only adds those to 2xx responses. — sideshowbarker
So you need to make the backend of http://localhost/api/about instead respond to that preflight OPTIONS request with a 200 OK and with the necessary value in the Access-Control-Allow-Headers header. If your current w.Header().Set("Access-Control-Allow-Headers", "*") is causing a literal Access-Control-Allow-Headers: * response header to be sent, then you need to change that, because browsers don’t currently support use of a wildcard there (it was added to the spec relatively recently). So you instead need to send Access-Control-Allow-Headers: x-host-override — sideshowbarker
same error when I did w.Header().Set("Access-Control-Allow-Headers", "x-host-override") :( — user3226932
Right, because the server is responding with a 404 to all requests for http://localhost/api/about. I see now that i.stack.imgur.com/NICft.png shows it’s responding with a 404 to your GET request. So it’s not something specific to the OPTIONS request. As far as I can that 404 isn’t related to any of your CORS config. — sideshowbarker
I got that 404 because I think axios ignored the headers field when I did headers: {'Host': 'dev.docker.local'}, that's why in the picture it still says "localhost" for Host, is there anything else I could check? — user3226932

user3226932 user3226932 · Accepted Answer · 2017-10-05T08:14:14

finally found a way to solve this problem for the browser, needed to use dnsmasq to point docker.local to 127.0.0.1 and then set baseURL to dev.docker.local, no need to override Host

axios cannot override host when making HTTP GET request to traefik reverse proxy

1 Answers