Comment by Sahil on "proxy configuration in the vue.config.js file"

Why was this file even created? You might have come to know that your frontend and backend server API are not on the same host (i.e. they are generally on localhost 3000 and 5000). And thats why we need to proxy the API requests from the frontend to the API server during development.
module.exports = {} In this case it's doing a trivial task of setting a few options automatically and is loaded by the @vue/cli-service process.
The devServer : { } configuration option helps us set up a new host for local development, so that the frontend can directly make us of the name-based virtual hosting functionality.
We set the `proxy: { }' : Our frontend app and the backend API server are not running on the same host, we need to proxy API requests to the API server during development.
'/api' will be the name that our frontend will use to redirect itself to backend (i.e. target: 'localhost/& in this case I suppose).
changeOrigin: true this option enables us to serve multi API urls based on their names on the same host. (i.e. localhost/api/post/1 and localhost/api/post/2.)
Finally to pass this localhost/api/post/1 as localhost/post/1 (i.e. to remove /api from our request) we make use of pathRewrite: { '^/api': ''} which will replace the /api with empty string. Note that: The purpose of pathRewrite here is to remove the matched portion from the destination URL.

to proxy requests between client(localhost) and api server (localhost). Could you explain to me the meaning of these code lines?

Edited check if it helps :) Raffaele Iavazzo

Sahil Kazi thanks, one last thing, can you tell me if these considerations are correct?

my client app runs on localhost:8080. server api runs on localhost:3000.

1) target option, in the proxy:{}, is the target URL('localhost:3000'), that is the server URL without resource path.

2) /api is first segment of a request path from the client app (for example localhost:8080/api)

3) pathRewrite modifies the matched portion from the target URL, in this case it replaces /api with empty string. ^/api is RegExp that matches the portion path in the target URL.

4) With the above code, every requests starts with /api :(localhost:8080/api, localhost:8080/api/1 ..........) will be proxied to localhost:3000, localhost:3000/1 ........

all correct?

@SahilKazi , can you modify your above response? \api with /api.

Yes the considerations are all good Raffaele Iavazzo

Sahil Kazi

what happens if i replace

pathRewrite: { '^/api': '' }

with

pathRewrite: { '^/api': '/apx/y' } ?

thanks

It should redirect the client side request to /api as /apx/y to the server while requesting the resource, that's all that I can say Raffaele Iavazzo

Hey Raffaele Iavazzo did this help you understand a few things, if you ever found a better answer/explanation to this which I suppose exists pls post it here :)

Sahil Kazi I did not understand well changeOrigin: true option

Search Hashnode