Http-proxy-middleware: Proxing to local https server with self signed cert

[kotfilemon]

Expected behavior

just proxing requests to the api.

Actual behavior

I get 404 response when insecure proxy is set to the existing resource

Setup

• http-proxy-middleware: 0.9.1
• server: browser-sync: 2.15.0
  

  proxy middleware configuration

var proxyMiddleware = require('http-proxy-middleware');
var proxyURL = 'https://portal.dev'; //this is my dev env, running on docker
var authProxy = proxyMiddleware('/rest', {target: proxyURL, secure: false, logLevel: 'debug'});

server mounting

browserSync.init({
              logLevel: "debug",
              https: true, //also tried while it was set to false
              server: {
                  baseDir: outputDir,
                  middleware: [authProxy]
              }             
          });

the logs

[HPM] Context match: "/rest" -> "/rest/version"
[HPM] Proxying "/rest/version": "undefined" -> "https://portal.dev"

the chrome console log:

Failed to load resource: the server responded with a status of 404 (Not Found)

the proxy itself setting is ok, if I change to:

var authProxy = proxyMiddleware('/rest', {target: proxyURL, secure: true, logLevel: 'debug'});

then I get different error which is expected:

[HPM] Context match: "/rest" -> "/rest/version"
[HPM] Proxying "/rest/version": "undefined" -> "https://portal.dev"
[HPM] Proxy error: SELF_SIGNED_CERT_IN_CHAIN. localhost:3000 -> "portal.dev/rest/version"

just to make sure it should work

$ curl https://portal.dev/rest/version --insecure
{"version":"82859f14"}

[chimurai]

Can you try again with the latest version of http-proxy-middleware (v0.17.1)?

[kotfilemon]

@chimurai yes, no changes

[kotfilemon]

I also tried with webpack-dev-server (with http-proxy-middleware updated), which also uses http-proxy-middleware

configuration:

var proxy = {
                      '/rest': {
                        target: 'https://portal.dev',
                        secure: false
                      }
                    };
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;
    myConfig.proxy = proxy;
    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {

        contentBase: "./dist",
        proxy: proxy,
        stats: {
            colors: true
        }
    }).listen(8888, "localhost", function(err) {
        if (err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8888/webpack-dev-server/index.html");
    });

log:

[HPM] Proxy created: /rest  ->  https://portal.dev

same stuff in the browser I see that resource was not found, erorr 404.

[chimurai]

Found this in the webpack-dev-server documentation:
http://webpack.github.io/docs/webpack-dev-server.html#proxying-local-virtual-hosts

Hope this one solves it

[kotfilemon]

@chimurai thank you for quick replies. I had to edit my comment, I didnot check it closesly. :(

with webpack-dev-server it changed a little bit, but still, it is not working (excluding cors issue, but you can omit it with disabling cors on chrome).

// modify some webpack config options
    var proxy = {
                   '/rest': {
                      target : {
                        host: 'portal.dev',
                        protocol: 'https',
                        port: 80
                        },
                      ignorePath: true,
                      changeOrigin: true,
                      secure: false
                    }
                };
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;
    myConfig.proxy = proxy;
    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        contentBase: "./dist",
        proxy: proxy,
        stats: {
            colors: true
        }
    }).listen(8888, "localhost", function(err) {
        if (err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8888/webpack-dev-server/index.html");
    });

now, I get in the browser:

request to http://localhost:8888/rest/version

Request URL:http://localhost:8888/rest/version
Request Method:GET
Status Code:301 Moved Permanently (from cache)
Remote Address:127.0.0.1:8888
Response Headers
content-length:185
content-type:text/html
date:Wed, 14 Sep 2016 15:19:52 GMT
location:https://portal.dev/
server:nginx/1.9.15
x-frame-options:SAMEORIGIN
X-Powered-By:Express
Request Headers
Provisional headers are shown
Accept:application/json, text/plain, */*
Referer:http://localhost:8888/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36
X-Requested-With:XMLHttpRequest

note the: location:https://portal.dev/

and then, second request: to https://portal.dev/ (no /rest/version)

with answer

Request URL:https://portal.dev/
Request Method:GET
Status Code:419 Unknown
Remote Address:127.0.0.1:443
Response Headers
view source
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Connection:keep-alive
Content-Length:66
Content-Type:text/html;charset=UTF-8
Date:Wed, 14 Sep 2016 15:20:08 GMT
Expires:0
Pragma:no-cache
Server:nginx/1.9.15
Strict-Transport-Security:max-age=31536000;
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block
Request Headers
view source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,pl;q=0.6
Connection:keep-alive
Cookie:_ga=GA1.2.511370581.1472493664; JSESSIONID=Ap4MTYV0

the response comes with body:

<html><head><title>Error</title></head><body>Unknown</body></html>

$ curl https://portal.dev/ -k gives nothing.

anyway to debug it?

[chimurai]

Hmmmm...
What kind of server are you using for https://portal.dev ?

[kotfilemon]

nginx, which is really proxing the requests to wildfly.

[kotfilemon]

we found it.

// modify some webpack config options
    var proxy = {
                   '/rest': {
                      target : {
                        host: 'portal.dev',
                        protocol: 'https',
                        port: 80
                        },
                      ignorePath: false,
                      changeOrigin: true,
                      secure: false
                    }
                };
    var myConfig = Object.create(webpackConfig);
    myConfig.devtool = "eval";
    myConfig.debug = true;
    myConfig.proxy = proxy;
    // Start a webpack-dev-server
    new WebpackDevServer(webpack(myConfig), {
        contentBase: "./dist",
        proxy: proxy,
        stats: {
            colors: true
        }
    }).listen(8888, "localhost", function(err) {
        if (err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8888/webpack-dev-server/index.html");
    });

ignorePath has to be set to false.

thanks for Your interest. ;)

[chimurai]

Glad to hear you got it sorted.
And thanks for sharing your solution!