Смешанное содержимое: запрошена небезопасная конечная точка XMLHttpRequest в Vue JS

Question

изображение ошибки

Привет, я работаю над Vue js и все ссылки на мой маршрут работают нормально, но когда я хочу добавить продукт, эта ошибка отображается на консоли , обновить и удалить функциональность продукта работает нормально. При добавлении продукта "publi c" в URL-адрес возникает некоторая проблема, как показано в ошибке. Кто-нибудь знает об этом типе ошибки и ее решении?

            editProduct() {
                this.form.put((`/auth/products/${this.form.id}`))
                    .then(response => {
                        $('#addNew').modal('hide');
                        Toast.fire({
                            icon: 'success',
                            title: 'Product updated successfully'
                        });
                        this.getResults();
                    });
            },
            addProduct() {
                this.form.post('/auth/products/')
                    .then(response => {
                        $('#addNew').modal('hide');
                        Toast.fire({
                            icon: 'success',
                            title: 'Product added successfully'
                        });
                        localStorage.setItem('productCount', response.data.products);
                        this.$emit('loggedIn');
                        this.products.data.push(response.data.data);
                    });
            },

Выше фрагмента кода, отредактируйте продукт нормально, но добавьте ошибку смешанного содержимого продукта.