Include example of multiple base URLs used with VueAxios

[ekosynth]

Many real world apps use more than one API to grab data. Could an example of this be included in this app?

[igeligel]

Hmm, in my opinion, this is handled at a different level.

There is a tool called NGINX (engine x) which supports implementing a reverse proxy. The question is probably why you want to do this?

• Gives one centralized point of where 3rd party APIs are integrated
• Gives you the possibility to hide requests to 3rd Party APIs
• Gives you the possibility to control how API calls are cached and so on
• You do not have to deal with CORS and security problems arising from this

You can find the official NGINX Reverse Proxy documentation here: https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

Basically what it is doing:

Source API ~> Local URL
https://example.com/api/ ~> /example-api/*
https://vue-realworld-api.com/api/ ~> /realworld-api/*

To make a request to https://example.com/api/persons/ locally you would request /example-api/persons/ and so on.

This setup was used in every organization I have worked with (@3YOURMIND and @klarna). I hope this makes it a bit more clear. Unfortunately, this app is just the "frontend" and it would not work to create a NGINX here. You can find a good explanation and step-by-step guide here: https://gist.github.com/soheilhy/8b94347ff8336d971ad0

I will leave this issue open if you have more questions :) Otherwise, I will close it in a week.

[ekosynth]

@igeligel Ok, that's a great answer thanks. Embarassingly, I didn't know about this approach, as I've never needed to call multiple APIs before.

Our stack is hosted on IIS, but it looks like reverse proxy is possible. I guess the only downside I can see is the extra configuration you need to add/change for the various APIs, rather than just including them in a vue environment config.

[ekosynth]

Also, just looking how would you configure the webpack server to implement this?

[igeligel]

That's no problem that you did not know about this approach. It is good that you ask those questions 👍 Shows that you are willing to learn :)

the only downside I can see is the extra configuration you need to add/change for the various APIs

yes and no. You need to this anyway. In the frontend or the Reverse Proxy. So you have to do it either way.

Also, just looking how would you configure the webpack server to implement this?

I answered this question once on stackoverflow: https://stackoverflow.com/questions/42748397/how-to-add-a-backend-to-the-webpack-template/42748740#42748740

You can also consult the official documentation here: https://cli.vuejs.org/config/#devserver-proxy