When encountering an issue while invoking a function in Vue.js, an internal error may occur, as evidenced by the message: "new Http

Currently, I am in the process of developing an application and encountering an issue where I am unable to comprehend a cryptic error message that keeps popping up. If you'd like to see the error itself, you can check it out here.

Below is my form.vue component:

export default {
data(){
        return{
            typPozemku: "",
            firstName: "",
            lastName: "",
            email: "",
            zprava: "",
        }
    },
methods: {
    submitForm(){
        const data = {
        typPozemku: this.typPozemku,
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        zprava: this.zprava,
        timestamp: new Date().getTime()
        };

        const sendEmail = firebase.functions().httpsCallable('sendEmail');
        sendEmail(data)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
            // This is where the error occurs within the browser
          });

        const db = firebase.database().ref('contacts');
        db.push(data)
          .then(() => {
            console.log('Data added to Firebase');
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
}

Here's a snippet of my Firebase cloud function code:

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const nodemailer = require('nodemailer');
const cors = require('cors')({origin: true});
// Remaining code omitted for brevity

I have exhaustively explored several versions of Firebase to troubleshoot this issue but remain stumped. Any assistance or guidance would be greatly appreciated.

Answer №1

When using

firebase.functions().httpsCallable
to call a function that was defined with onRequest, it won't work. To use a callable type function on both the front-end and back-end, your back-end must also be defined as callable using onCall. Check out the documentation for more information and examples.

It's worth noting that HTTPS callable functions are similar but not the same as HTTP functions. To utilize HTTPS callable functions, you need to use the client SDK for your platform along with the functions.https backend API (or implement the protocol).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discrepancy in functionality between .show() and .append() methods within JQuery

I have a container with an ID of "poidiv" that is hidden (display: none) initially. My goal is to dynamically load this container multiple times using a loop, where the maximum value for the loop is not predetermined. I attempted to achieve this using jQue ...

Restricting the number of mat-chips in Angular and preventing the input from being disabled

Here is my recreation of a small portion of my project on StackBlitz. I am encountering 4 issues in this snippet: I aim to restrict the user to only one mat-chip. I attempted using [disabled]="selectedOption >=1", but I do not want to disable ...

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...

Warning users when submitting a form if required fields are left empty

As a Python developer, I have been delving into Vue.js development. I have a function similar to a() in Python that takes iterables. If all items in the iterable are true, then all([...]) returns true. methods: { all: function(iterable) { for ...

Is it truly necessary to remove packages from devDependencies to improve performance?

It is a common understanding that packages listed under devDependencies are typically not included in the final build. So why do we remove them for the sake of performance optimization? For instance, there are discussions about replacing Moment.js with a ...

The content of the served HTML Table remains static and requires a server restart for any updates to

Having been encountering this issue for quite some time, I have searched extensively for a solution but to no avail. Therefore, I am taking matters into my own hands and posing the question myself. The dilemma is as follows: https://i.stack.imgur.com/UZrQ ...

If the number of items in Vuetify tabs exceeds the limit, they will collapse into a 'more' button

I am working on developing an electron application with a customizable width, allowing users to adjust the size of the app according to their preference. The width of the app should determine how many "items" are visible in the navigation bar. If there a ...

The function of style.marginRight differs from that of style.marginLeft

One function aligns content to the left while the other doesn't align it to the right function openNavLeft() { document.getElementById("mySidenavLeft").style.width = "100vw"; document.getElementById("main").style.marginLeft = "100vw"; } function ...

ApEditingError: The method editAp is not defined in _this.props

I am facing an issue while trying to invoke the function editAp located in the func.js file from Edit1.js. I have provided the code snippets below for better understanding: import firebase from "firebase"; if (!firebase.apps.length) { firebase.initializ ...

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

It is widely believed that JavaScript operates on a single-threaded model, but it has the ability to run asynchronously. One intriguing aspect is how this single-threaded model manages non-blocking AJAX requests. Consider a scenario where a non-blocking A ...

"After completing the survey form, the User Details form is displayed upon clicking the submit button

In my Quiz, each question loads on a separate page with clickable options. Some questions may have multiple answers, including an "Others" option. At the end of the quiz, users need to fill out a form. Although I've created a survey form, I'm fa ...

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

Guide to Displaying HTTP POST Request Response on Pug Template

Whenever a user interacts with the form, I initiate an HTTP POST request to the database server. Subsequently, the database server sends a POST request back to the user's server. The issue I am facing is the inability to display this database result ...

Adding an <a> tag or icon within Vuetify internationalization: Tips and Tricks

I am currently immersed in a project utilizing Vuetify. My challenge lies in creating an internationalized text that includes both an <a> tag and an icon. While inserting a variable is straightforward as shown below, this.$vuetify.lang.$t('I&ap ...

Trouble with jQuery click event on dynamically generated elements

I have a jQuery function that iterates through each element inside a specified div (#container) and triggers a JavaScript alert whenever a span is clicked. Everything functions correctly when the spans are static. However, when I include code like this: ...

Creating components and dynamic routing based on the current route

I'm in the process of creating "overview" pages for different sections within my app, each triggered from the root of that particular section. For example, localhost/hi should display the HiOverview component, And localhost/he should display the HeO ...

Fill the next Thursday with JavaScript

I'm having trouble updating the date for the upcoming Thursday using JavaScript. The current script works fine until the end of the month, but if it's the 25th of August, the output will be "Next Thursday - 8/32/2022". I need a more intelligent s ...

Use JavaScript to upload a JSON file containing arrays into separate tabs

Looking for help with incorporating JSON data into an HTML template that features tabs and a gallery? Take a look at my setup below: <div class="tab"> <button class="tabLinks" onclick="openDiv(event, 'overview'); appendData()" id= ...

Leveraging functions in a Node.js module

I am struggling with using a function inside a Node.js module. I have implemented a custom sorting function to sort an array of objects based on the value of a specific property. exports.getResult = function(cards) { cards.sort(sortByField('suit& ...

When incorporating a background-image into my Vue.js project, I encountered this error

I encountered an issue after adding a background-image to my vue.js project: ./src/assets/scss/argon.scss (./node_modules/css-loader??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf ...