Error SSL_ERROR_RX_RECORD_TOO_LONG with trusted domain and Browser Sync

Support
1

Hi everyone!

I’ve a problem with ‘trusted domaine’ and Browser Sync. IDK why, but all site with an SSL certificate in Local git an error : SSL_ERROR_RX_RECORD_TOO_LONG

I don’t know from when this issue happening, but Browser have always working with this configuration.

Maybe I need to specify an SSL certification in Browser Sync ?

This is my configuration file :

const gulp = require("gulp");
const sourcemaps = require("gulp-sourcemaps");
const sass = require("gulp-sass");
const bulkSass = require("gulp-sass-bulk-import");
const autoprefixer = require("gulp-autoprefixer");
const minifyCss = require("gulp-minify-css");
const rename = require("gulp-rename");
const browserSync = require("browser-sync").create();
const concat = require("gulp-concat");
const uglify = require("gulp-uglify-es").default;
const babel = require("gulp-babel");

/*
 * GULP TASK
 *
 */

// Define css Task
const cssConfig = {
  src: "assets/sass/import.scss",
  watch: "assets/sass/*.scss",
  filename: "site.css",
  dest: "./assets/css/",
  autoPrefixer: "last 2 versions"
};

const cssTask = () => {
  return gulp
    .src(cssConfig.src)
    .pipe(bulkSass())
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
    .pipe(
      autoprefixer({
        browsers: cssConfig.autoPrefixer,
        cascade: true
      })
    )
    .pipe(minifyCss({ keepSpecialComments: 1 }))
    .pipe(rename(cssConfig.filename))
    .pipe(sourcemaps.write(""))
    .pipe(gulp.dest(cssConfig.dest))
    .pipe(browserSync.stream());
};

// Define js Task
const jsConfig = {
  src: "assets/js/app.js",
  watch: "assets/js/app.js",
  filename: "app.min.js",
  dest: "./assets/js/app.min.js"
};

const jsTask = () => {
  return gulp
    .src(jsConfig.src)
    .pipe(sourcemaps.init())
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat(jsConfig.filename))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(jsConfig.dest))
    .pipe(browserSync.stream());
};

gulp.task("serve", function(done) {
  browserSync.init({
    proxy: "ideta.local",
    port: 2010,
    ui: {
      port: 2020
    }
  });

  gulp.watch(cssConfig.watch, (BuildCSS = () => cssTask()));
  gulp.watch(jsConfig.watch, (BuildJS = () => jsTask()));

  done();
});

gulp.task(
  "default",
  gulp.series("serve", done => {
    done();
  })
);

Thanks for your help :slight_smile:

2

Hi Logan,

If you access the site directly (without BrowserSync proxy) do you get the SSL_ERROR_RX_RECORD_TOO_LONG error?

Also, does this error show in all browsers or only specific browsers?

3

Hi clay!

No, the site on .local works fine, but that’s really strange, if site hasn’t SSL, it work with BrowserSync, and if i launch a create-react-app or gatsby in port : 8000, it also works fine.

And yes, the issue is in all browsers, even a fresh install of Edge :roll_eyes:

4

Hi,

I had the same issue here and solved it simply by changing

browserSync.init({
proxy: ‘http://mysite.local/’
});

in

browserSync.init({
proxy: ‘https://mysite.local/’
});

The error appears some weeks ago, maybe with a new version of local and/or firefox.
it has worked since months/years with proxying “http://” and I can’t explain/understand what happened…

PS : for some compatibility reasons i use node.js v11.15.0 and not the last version, maybe it’s related…

Sorry for my poor english :o)

5

Thanks Altilev. English is fine!

You solved my issue. I used to use no http or https prefix in browsersync.

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.