Exploring the capabilities of Netlify Dev in conjunction with Vue JS and Netlify Functions for advanced development

I have a small web app that I built using Vue and Netlify functions. Everything works perfectly when deployed in production, but I encounter issues when trying to use 'netlify dev' for local development. The calls to the netlify function are failing with this error message:

VM23:1 POST http://localhost:18002/.netlify/functions/customfunction 404 (Not Found)

It seems like the endpoint in the development environment is different from what I expected. How can I determine the correct endpoint? When running 'netlify dev', the console shows that the lambda server is listening on port 3467... but attempting to access the API through 

http://localhost:34567/.netlify/functions/customfunction
results in a CORS error. Any guidance on resolving this issue would be greatly appreciated!

vue.jsnetlify

Answer №1

It's possible that you are encountering the CORS error due to your server not being hosted on the same domain as your Vue app. To resolve this issue, you'll need to configure a proxy by creating a vue.config.js file in your project directory (not the Vue folder) and adding the following code:

module.exports = {
  devServer: {
    proxy: 'http://localhost:34567' // Specify your server's port here
  }
}

With the proxy now set up, your request URL will be:

/.netlify/functions/customfunction

For additional documentation, refer to: https://cli.vuejs.org/config/#devserver-proxy

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

Passing data between multiple components in Vue.js and Laravel: Best practices

require('./bootstrap'); window.Vue = require('vue'); Vue.component('exampleComponent1', require('./components/exampleComponent1.vue')); Vue.component('exampleComponent2', require('./components/exampl ...

javascriptlaravelvue.jsvuejs2

Employ a data or computed property that relies on the value of the prop. The prop will be changed

I'm trying to open a modal in Vue, but I keep getting this error message in the console from the navigator: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed ...

javascriptvue.js

Different file paths in the 'public' directory using VUE CLI

My current application architecture is structured as follows: Within the 'frontend' folder, I have my applications. The 'html' folder contains the single page application (spa) that was constructed. Inside the 'spa' directory, ...

vue.jswebpackvue-clivue-cli-4

Issue with VueJS: Method not displaying returned data

I am successfully able to retrieve data in the console. However, I am encountering an issue when trying to display this data on the webpage using double curly braces. The rest of the template displays fine without any issues. Template: <template> ...

vue.jsreturn-valuegeocode

Seeking instructions on incorporating multiple components in a tab section effectively?

I am currently using a tab system that functions flawlessly. As I delve into learning VueJs, one concern has arisen in my mind about components and/or templates: Using the analogy of tab windows, how can I incorporate two components within a single tab, s ...

htmlvue.js

Extracting an ID value from a select box in Vue.js

I'm attempting to extract the value of idTipoExame from the following JSON: { "idTipoExame": "11", "mnemonico": "AUR", "exame": "ACIDO URICO" }, { "idTipoExame": "24&qu ...

javascripthtmljsonvue.js

Confused by the concept of Vuex

In my application, I am working with two resources: Projects and Pieces. Projects have multiple Pieces, and accessing a specific Piece is done through the following route: .../projects/:project_id/pieces/:piece_id Within Vuex, the currentProject is store ...

vue.jsvuex

What is the best way to show a datepicker when a button is clicked in vuetify?

Here is the structure of my script: ===========--=========--=============--=============== <template> <v-card max-width="1200" class="mx-auto" > <v-row> <v-col cols="12" sm="6" md="4"> <v-me ...

vue.jsdatepickervue-componentvuetify.js

What is causing the data not to react with the props in this particular scenario?

In addition to the central App.vue component, I have two other components - Rooms.vue and Desks.vue. When a swiper element in the Rooms.vue component is clicked, it triggers the opening of the Desks.vue component and emits the room object to App.vue. This ...

vue.jsvuejs3

Interact with parent function from child component using data attribute in Vue.js

I have a parent component called Waypoint that contains child elements. I want to be able to call functions on these child elements from the parent component. How can I achieve this? //coding example //template <Waypoint> <div :data-wp-cb ...

vue.js

Vue.js does not display HTML properly within the vue-swal component

I'm currently working on integrating HTML content into a Sweet Alert popup using this code snippet Link: https://www.npmjs.com/package/vue-swal this.$swal({ title: '<i>Custom HTML</i>', html:`This is an <em> em ...

javascriptvue.jsvuejs2

The error message "TypeError: undefined in JavaScript Vue's V-for loop

I created a function that generates an array of objects in this format: getMonthDaysGrid() { const totalLastMonthDays = this.getFirstDayOfMonth().dayNumber; const totalDays = this.month.numberOfDays + totalLastMonthDays; const monthList = Array ...

javascriptvue.jsvuejs2

Binding Vue MultiSelect Checkboxes to Data Model

The data properties of the multi-select component are not updating when changed. The checkboxes are not being updated on the front-end. Expected Behavior: The checkboxes should get ticked when clicked. Link to code: https://jsfiddle.net/bzqd19nt/3/ < ...

vue.jscheckboxmulti-selectvue-multiselect

how to dynamically update a button's text using Vue.js

I have a challenge where I need to dynamically change the text of a button based on whether a value is true or false. Below is the code snippet that I have been working on: <button class="btn btn-primary table-button" type="button&quo ...

javascripthtmlvue.jsbuttonwatch

Tips for obtaining the state of a local variable in a Vue method:

How do I access the state of a local variable within a method in Vue? I am looking to set a specific value for the dialog in order to open the popUp. After loading the data, my goal is to open the popUp by using this porting method. import { mapState, m ...

javascriptvue.jsvuejs2vue-component

What are some ways to optimize the reusability of axios API requests in vuejs?

Is there a way to optimize Axios API requests for reusability in my app? By avoiding repetitive code, I aim to streamline the process. // Incorporating the Axios HTTP library window.axios = require('axios'); window.Vue = require('vue') ...

vue.jsaxios

Clicking on a button will trigger the opening of a modal dialog

I encountered an issue with the following code: <sepa-modal ref="sepaModal" /> <b-card id="show-btn" class="card-modal" @click="openSepaModal()" > </b-card> openSepaModal ...

javascriptvue.jsvuejs2bootstrap-vue

What is the method for incorporating a global function with a plugin to display notifications in Vue.js?

Recently, I encountered an issue while trying to create a global function using a plugin. Everything seemed to be working fine until I faced difficulties in displaying my notifications. Tired of repeating the notification display methods everywhere in my c ...

vue.js

Error in vue.js: Unable to call this.$emit as it is not a function

export default { mounted() { setTimeout(function() { this.$emit('onLoad') }, 4000); } } //views/Load.vue I want to redirect to another page after the page has been accessed for 4 seconds. <template> <d ...

javascriptvue.jsvue-component

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex