I am using vue-cli webpack-simple template to generate my projects, and I'd like to proxy requests to a separate, backend server. How can this be easily achieved?
4 Answers
In @vue/cli 3.x:
- Create a
vue.config.jsfile in the root folder of your project, if you don't already have one. - Have its contents as follows:
// vue.config.js
module.exports = {
devServer: {
proxy: {
"/gists": {
target: "https://api.github.com",
secure: false
}
}
}
};
Now any call to (assuming your dev server is at localhost:8080) http://localhost:8080/gists will be redirected to https://api.github.com/gists.
Another example: proxying all calls
Say you have a local backend server that is typically deployed at localhost:5000 and you want to redirect all calls to /api/anything to it. Use:
// vue.config.js
module.exports = {
devServer: {
proxy: {
"/api/*": {
target: "http://localhost:5000",
secure: false
}
}
}
};
3 Comments
LJD
Thanks, this helped me. Annoying how it's not super easy to find this info with numerous google searches
deontologician
Can anyone link to the docs where I should have found this information?
Doug Wilhelm
Relevant
devServer Webpack documentation: webpack.js.org/configuration/dev-server/#devserverproxyIf you use webpack template with vue-cli, then you can find the required information in this reference document:
http://vuejs-templates.github.io/webpack/proxy.html
Or instead of changing your template now, you may copy the relevant config from the webpack template into your local webpack-simple template.
EDIT: more info from my local setup
This is what I have in my config/index.js under module.exports:
dev: {
env: require('./dev.env'),
port: 4200,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
},
'/images': {
target: 'http://localhost:8080',
changeOrigin: true
},
// and so on...
The above config runs my vue-cli on port 4200, and I run my server on port 8080.
EDIT: Corrected info about CORS after comment #4 and #5
Note:
- The
changeOriginoption indev.proxyTable(in webpack config) ensures that you do not need to serve CORS headers on your server API responses. - If you decide to omit
changeOriginfor any reason, then you need to ensure that your server API includesAccess-Control-Allow-Origin: *(or equivalent) in its response headers.
References:
6 Comments
Mahmud Adam
So it's more difficult to using the webpack-simple template?
Mani Jagadeesan
I think
webpack-simple is intended to get started with Vue.js. The webpack template provides lot more configuration, and even has a detailed help-page for additional info.Mani Jagadeesan
As you rightly said, it becomes more difficult later if you start with the simple template and write a lot of code, as you need to do all the additional config work yourself.
JJPandari
We may not need CORS here, I added static file plugin/library to my backend so it can serve
index.html and made the frontend develop server proxy every single request to backend server. No more CORS, a bit cleaner.Mani Jagadeesan
Thanks for the info! I just did some quick experiment locally and found that either we need CORS headers, or set
changeOrigin: true in the proxyTable options for webpack dev. Server proxy is done using http-proxy-middleware - this github page confirms that changeOrigin option changes host headers to server URL (target). |
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://genius.net',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
},
'/auth': {
target: 'http://genius23.net',
changeOrigin: true,
pathRewrite: {
'^/auth': ''
}
},
}
}
};
1 Comment
Eric Goode
This is the best answer because it gives the pathRewrite. Unless you are adding /api to the URI of all of your dev servers you will need this.
if these answers do not work
try to add http://127.0.0.1:{your port} in my case it would not start without it
vue-cli's boilerplate and used this generator for yeoman instead. It got me started even I had little knowledge of webpack/gulp/browser-sync(though there was a few gotchas when I tried to integrate it with backend). I think it's worth a look and choosing betweenvue-cliand it.