Error when browser-sync is proxied with local https server

Question

I have a REST API server running at https://localhost:7001. This one uses a JKS keystore for configuring https.
A combination of gulp + browser-sync + proxy-middleware that spins up a server serving static content at https://localhost:3000. All requests to https://localhost:3000/api are proxied to https://localhost:7001/api.

However, I got this error:

Error: self signed certificate
    at Error (native)
    at TLSSocket.<anonymous> (_tls_wrap.js:1060:38)
    at emitNone (events.js:86:13)
    at TLSSocket.emit (events.js:185:7)
    at TLSSocket._finishInit (_tls_wrap.js:584:8)
    at TLSWrap.ssl.onhandshakedone (_tls_wrap.js:416:38)

It seems to me that the error happens because of the REST API server in (1.) and the static server in (2.) use different certificates for their HTTPS configs.

The REST API server in (1.) uses a self signed JKS keystore for https.
I believe the static server in (2.) uses a default self-sign certificate that comes with browser sync.

So the two certificates are different. This is my guess for the cause of the error.

Any idea how to fix the problem? And what is the real cause of the error if my guess is wrong?

I could not find any instruction for how to use JKS as a certificate for the static server with browser-sync. In https://browsersync.io/docs/options, there is an instruction for how to put certificate to browser-sync, but that is a different type of certificate, and there was no field for password:

// Enable HTTPS mode with custom certificates
browserSync({
    server: "./app",
    https: {
        key: "path-to-custom.key",
        cert: "path-to-custom.crt"
    }
});

so I am still clueless. Any suggestions are greatly appreciated.

My gulp.js file for reference:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var url = require('url');
var proxy = require('proxy-middleware');

gulp.task('browserSync', function() {
    var proxyOptions = url.parse('https://localhost:7001/api/');
    proxyOptions.route = '/api';

    // requests to `https://localhost:3000/api/x/y/z` are proxied to `https://localhost:7001/api/x/y/`

    browserSync.init({ //initialize a server with the given directory
      open: true,
      port: 3000,
      https: true,
      server: {
          baseDir: '.',
          middleware: [proxy(proxyOptions)]
      }
    });
});

gulp.task('watch', ['browserSync'], function() {
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/**/*.html', browserSync.reload);
    gulp.watch('app/**/*.js', browserSync.reload);
});

Error when browser-sync is proxied with local https server

0 Answers0