My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

proxy rule in the vue.config.js file

Raffaele Iavazzo's photo
Raffaele Iavazzo
·Sep 22, 2020·

1 min read

Hi, could you tell me if the following considerations are correct?

vue.config.js:

module.exports = { //configure webpack-dev-server behavior devServer: { proxy: { '/api': { target: 'localhost:3000/', changeOrigin: true, pathRewrite: { '^/api': '' } } } } }

considerations:

1) '/api': { target: 'localhost:3000' ........ }

All requests made to /api' from within my vue application will be forwarded to target: 'localhost:3000'

So if I have my client (vue app) runs at localhost:8080 and there are requests start with resource path /api, these requests will be proxied to the target address: localhost:3000

for example:

request localhost:8080/api will be proxied to localhost:3000/api

request localhost:8080/api/1 will be proxied to localhost:3000/api/1 and so on.

.........................................................................................................

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

^/api is a regex.

pathRewrite matches /api segment path in the target address and replaces it (/api) with empty string

for example proxied request to localhost:3000/api/1 will become localhost:3000/1

all correct or are there errors?

Thanks