Making ServerName work

Today I was setting up a local server. I setup my virtual hosts and as with most federated software needed some https, so I reached for ngrok.

ngrok http --subdomain=example --host-header=rewrite example.localhost 80

All good, except when the app started serving assets and routes everything was getting blocked by the unsecured call to http://example.localhost

I revised my httpd-vhosts.conf file, and sure enough I had set a ServerName.

<VirtualHost example.localhost:80>
    DocumentRoot "/Users/moi/Sites/example"
    ServerName example.ngrok.io
    ServerAlias example.localhost
</VirtualHost>

I was a bit puzzled so I decided to look at the server variables:

echo '<PRE>'; print_r($_SERVER); echo '</PRE>';

Sure enough the SERVER_NAME variable was returning as example.localhost despite my having explicitly set a ServerName in the vhost, so what was going on?

After a bit of digging I found that I needed to override a default setting in httpd-default.conf

UseCanonicalName: Determines how Apache constructs self-referencing URLs and the SERVER_NAME and SERVER_PORT variables.
When set “Off”, Apache will use the Hostname and Port supplied by the client. When set “On”, Apache will use the value of the ServerName directive.

Setting UseCanonicalName On solved the issue allowing ServerName to override the client (ngrok/browser) supplied value.