Vue - Mixed content warning in Chrome Developer Console

Question

I have a Vue.js app up and running, which produces the following warning.

Mixed Content: The page at 'https://mypage.com/some/route' was loaded over HTTPS, but requested an insecure resource 'http://mypage.com/some/route'. This request has been blocked; the content must be served over HTTPS.

The request is visible in the network tab. That's not all however.

• It only occurs once after a refresh. (F5)
• It occurs exactly when Chrome dev tools are opened. (F12)
• If dev tools were already open when the page was loaded, no HTTP request occurs.
• With all plugins disabled, in incognito, the request is still sent.
• The message is not shown in Firefox, or for any other web page in Chrome.
• There are no absolute references to a HTTP address in the Vue app.
• When I put scripts on PAUSE and re-open the console after a refresh, the request occurs but I do not enter a debugging state.
• When I add a breakpoint to stop on any request containing "http://", the breakpoint is never activated.

What could the problem be? How can I diagnose this spooky behavior?

Answer 1

Since there seems to be no obvious answer, I took the following steps.

1. Build the app locally and serve it.
2. Remove things from the code until it no longer occurs.
3. Source of the problem seemed to be vue-router, but I also saw some other weird behaviors where the page wouldn't load.
4. Google a lot.
5. Find out that to serve a SPA with HTML5 routing, many static file hosting tools are not suitable, notably http-server (https://github.com/indexzero/http-server/issues/80)
6. Fix the Dockerfile I was using as follows.

Dockerfile

FROM kyma/docker-nginx
COPY dist /var/www
COPY ./dashboard.nginx
/etc/nginx/sites-enabled/default CMD 'nginx'

Copy the default nginx config from the base image, and replace try_files $uri $uri/ @root; with try_files $uri $uri/ /index.html;.

That not only fixed the problem, but other related routing issues as well!