Browser-sync - proxy a domain gets HTTP error 403 - you don't have authorization to view this page

Question

I run a gulp task using NodeJS module browser-sync as below.

=== File gulpfile.js ===

 let browserSync = require('browser-sync').create(); gulp.task('browser-sync', function(){ browserSync.init( { open: true, injectChanges: true, proxy: 'https://generalgulp.devsunset', host: '192.168.1.76', serveStatic: ['.'], https: { key: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.key', cert: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.crt' } }); });

=== ===

My local project information is as below (I use latest up to current post date):

• Node version: 17.1.0
• NPM versions: 8.1.3
• gulp: 4.0.2
• NPM module browser-sync: 2.27.7

I run the browser-sync task. The output looks good.

==>

Using gulpfile C:\WebProjects\GeneralGulp\gulpfile.js

[Browsersync] Starting 'browser-sync'...

[Browsersync] Proxying: https://generalgulp.devsunset

Access URLs:

---

Local: https://localhost:3000

External: https://192.168.1.76:3000

---

UI: http://localhost:3001

UI External: http://localhost:3001

---

==>

• I already add the SSL certificate for this domain to trusted root. I also have DNS records pointing from this domain ( https://generalgulp.devsunset ) - IP addresses ( 127.0.0.1 & 192.168.1.76)

I can access the site from both local & external address.

However, when I try to access the local resources using proxied domain ( https://generalgulp.devsunset ), it gets an HTTP 403:

Access to <my_custom_domain> was denied. You are not authorize to view this page

I suppose when running my gulp "browser-sync" task, it will translate the custom domain to the https://localhost:3000 or https://192.168.1.76:3000

I have followed exactly the documents of https://browsersync.io/docs . I have also made an attempt with all solutions I could find. Those solutions led me to the gulp task that I wrote at the beginning.

I would appreciate if you can suggest me which things I should do further to troubleshoot why does my browser-sync cannot “proxy” my domain? Is there any parameter missing in my Gulp task?

Thanks !

Answer 1

I have modified the "proxy" parameter as below and it works when i access the proxied domain with given port: (for my case is http(s)://generalgulp.devsunset:3000 )

`gulp.task('browser-sync', function(){
browserSync.init( {
    open: true,
    injectChanges: true,
    proxy: 'generalgulp.devsunset',
    host: '192.168.1.76',
    serveStatic: ['.'],
    https: {
        key: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.key',
        cert: 'C:\\WebProjects\\GeneralGulp\\resources\\certificates\\server-generalgulp.crt'
    }
});

}); `

This is a temporary acceptable solution regarding to the current question scope.

However, What i expect is the browser-sync will auto-forward traffic from custom domain ( http(s)://generalgulp.devsunset ) to: ( http://192.168.1.76:3000 ).

Does browser-sync allow users to do it?