Preface
Proxy for certain URLs can be useful if you have a separate backend development server API and want to send API requests under the same domain name.
Solve cross-domain problems in the development environment (no need to configure nginx and host, it's cool~~)
Configure in
Here are five common scenarios
Use one:
= {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
Request to /api/xxx will now be proxyed to the request http://localhost:3000/api/xxx, for example /api/user will now be proxyed to the request http://localhost:3000/api/user
Use two
If you want to proxy multiple paths to the same target, you can use an array of one or more "objects with context attributes":
= {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
Use three:
If you don't want to always pass /api, you need to override the path:
= {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
Request to /api/xxx will now be proxyed to the request http://localhost:3000/xxx, for example /api/user will now be proxyed to the request http://localhost:3000/user
Use four:
By default, backend servers running on HTTPS and using invalid certificates are not accepted. If you want to accept it, just set secure: false. Modify the configuration as follows:
= {
//...
devServer: {
proxy: {
'/api': {
target: '',
secure: false
}
}
}
};
Use five:
Sometimes you don't want to proxy all requests. A proxy can be bypassed based on the return value of a function.
In the function you can access the request body, response body, and proxy options. False or path must be returned to skip proxy requests.
For example: For browser requests, you want to provide an HTML page, but remain proxy for API requests. You can do this:
= {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (('html') !== -1) {
('Skipping proxy for browser request.');
return '/';
}
}
}
}
}
};
Solve cross-domain principle
There is a changeOrigin parameter in the above parameter list, which is a Boolean value. If set to true, a local server will receive your request and send the request on your behalf.
= {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};
Example of proxyTable configuration interface address proxy in vue-cli
Modify config/
= {
dev: {
// Static resource folder assetsSubDirectory: 'static',
// Publish path assetsPublicPath: '/',
// Agent configuration table, where specific request proxy can be configured to the corresponding API interface //Usage method: /webpack/ proxyTable: {
// For example, proxy 'localhost:8080/api/xxx' to '/api/xxx' '/api': {
target: '', // The domain name of the interface secure: false, // If it is the https interface, you need to configure this parameter changeOrigin: true, // If the interface crosses the domain, this parameter configuration is required },
// For example, proxy 'localhost:8080/img/xxx' to '/xxx' '/img': {
target: '', // The domain name of the interface secure: false, // If it is the https interface, you need to configure this parameter changeOrigin: true, // If the interface crosses the domain, this parameter configuration is required pathRewrite: {'^/img': ''} // pathRewrite to rewrite the address and convert the prefix '/api' to '/'. }
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by
port: 4200, // can be overwritten by , if port is in use, a free one will be determined
}
More parameters
Dev-server uses very powerfulhttp-proxy-middleware , http-proxy-middleware is implemented based on http-proxy, you can view the source code and documentation of http-proxy:/nodejitsu/node-http-proxy。
- target: The url string to be parsed using the url module
- forward: The url string to be parsed using the url module
- agent: Object to pass to http(s).request (see Node's https proxy and http proxy object)
- ssl: The object to be passed to ()
- ws: true / false, whether to proxy websockets
- xfwd: true / false, add x-forward header
- Secure: true / false, whether to verify SSL Certs
- toProxy: true / false, passing an absolute URL as a path (useful for proxy proxy)
- prependPath: true / false, default value: true - Specifies whether to add the target's path to the proxy path
- ignorePath: true / false, default: false - Specifies whether to ignore the proxy path to the incoming request (note: you must attach/manually if needed).
- localAddress: local interface string to be bound for outgoing connection
- changeOrigin: true / false, default value: false - Change the origin of the host header to the destination URL
refer to
Official Documentation
http-proxy-middleware
node-http-proxy
API Proxying During Development
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.