Web Bluetooth API: Origin is not allowed to access the service

Question

I am using web Bluetooth API, to connect a BLE device. Its working perfect on https://localhost. But when I try it on my live server which is also on https or when I try it on http://locahost, it throughs me this error " Origin is not allowed to access the service. Tip: Add the service UUID to 'optionalServices' in requestDevice() options.". The code is given below. I have already added optionalServices.

      scanDevices () {
            if(navigator.bluetooth) {
                navigator.bluetooth.requestDevice({
                    acceptAllDevices: true,
                    optionalService: ['0000fee0-0000-1000-8000-00805f9b34fb', '0000fee1-0000-1000-8000-00805f9b34fb']
                })
                .then(device => {
                    // save the device returned so you can disconnect later:
                    this.device = device;
                    this.device.addEventListener('gattserverdisconnected', this.onDisconnected);
                    // connect to the device once you find it:
                    return this.connect();
                })
                .then((server) => {
                    this.server = server;
                    return server;
                })
                .catch(function(error) {
                    // catch any errors:
                    console.error('Connection failed!', error);
                });
            } else {
                this.errorMessage = 'Your browser does not support web bluetooth API.';
            }

        },
        connect(){
            let connection = this.device.gatt.connect();
            console.log('Connected', connection);
            return connection;
        },
        readData (){
            this.isLoader = true;
            console.log('get the primary service:');
            console.log(this.server);
            this.server.getPrimaryService(this.parsedService)
            .then((service) => {
                console.log('get the  characteristic:');
                return service.getCharacteristic(this.parsedCharacteristic);
            })
            .then(characteristic => {
                return characteristic.readValue();
            })
            .then(value => {
                console.log(value);
                this.isLoader = false;
                let decoder = new TextDecoder('utf-8');
                console.log(decoder.decode(value));
            })
            .catch(error => {
                this.isLoader = false;
                this.errorMessage = error.message;
            });
        },

Answer 1

It seems like it is missing an "s" to optionalService. It should be optionalServices according to https://webbluetoothcg.github.io/web-bluetooth/#dom-requestdeviceoptions-optionalservices