Developing using Netlify Dev with Vue JS and Netlify Functions

Question

I am using vue + netlify for a small web app that uses netlify functions I built. Everything works fine in production (when I commit to master and netlify auto-deploys based on my master branch) but when I try to use netlify dev to spin up a local development instance, calls to the netlify function are failing:

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

Clearly the endpoint in the dev enironment is not the same, but how do I know what that endpoint may be? In the console when running the netlify dev command it says that the lambda server is listening on 3467... but trying to use endpoint http://localhost:34567/.netlify/functions/customfunction results in a CORS error. Any help here would be appreciated!

Abdelillah Aissani · Accepted Answer · 2019-08-25 12:37:35Z

1

you might be getting the CORS error because your server is not running on the same host with your vue app and to fix this you have to set a proxy and for that you need to create a vue.config.js file on the project directory (not the vue folder) then past the following code:

module.exports = {
  devServer: {
    proxy: 'http://localhost:34567' // the port your server in running on
  }
}

now your proxy is set so your request URL will the following :

/.netlify/functions/customfunction

Doc reference : https://cli.vuejs.org/config/#devserver-proxy

edited Aug 25, 2019 at 12:37

answered Aug 25, 2019 at 12:32

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Developing using Netlify Dev with Vue JS and Netlify Functions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related