Vue js

Proxying APIs for Vue.js application

Last week I learned how to proxy back-end APIs in Vue CLI application.

At first, It looks pretty straightforward but when I implemented it, it took me a little longer to figure out the right combination. I read many StackOverflow posts and other solutions but none of them worked for me.

Finally, I found a very simple solution, so I thought I should share this with everybody it might save your time.

Backend API endpoint - https://reqres.in/api

This is my demo application:

And, this is how my network calls look like:

Now, after proxying the APIs, Request URL should become http://localhost:8080/api/users

Since I am using Axios in main.jsI had to put this line of code:

axios.defaults.baseURL = 'http://localhost:8080/api/'

Then, create vue.config.js file at the root level, and put below code in there.

module.exports = {
   devServer: {
      proxy: 'https://reqres.in'
   }
}

restart dev server. — npm run serve

My application is still up and running and under the network tab now my APIs are being proxied.

Please do let me know if this helps!

You may also like...

Popular Posts