webpack dev server mixed content error

Question

I'm running React based website on Cloud9 using webpack-dev-server, so it serves content over https. The problem is that when I try to make some ajax (network) request to external http link, it gives the following error:

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

Is there any trick for webpack configuration to make it possible request data from http?

Answer 1

Probably there is no solution for webpack-dev-server, but the following is good for nodejs

app.use(function(req, res, next) {
    if (req.headers['x-forwarded-proto'] == 'https') {
        res.redirect('http://' + req.hostname + req.url);
    } else {
        next();
    }
});