The problems that must be encountered during the separation of front and back ends - cross-domain. When using vue development, we started to solve cross-domain problems. CORS (Cross-origin resource sharing) is used. The background adds Access-Control-Allow-Origin in the response header. This way, you can adjust the background interface across domains.
A few days ago, I accidentally saw a proxyTable property in the config file. The cross-domain of the development environment can be solved through configuration.
API proxy during development
When integrating this boilerplate with an existing backend, it is often necessary to access the backend API when using a dev server. To achieve this, we can run the dev server and API backend in parallel (or remotely) and have the dev server proximate all API requests to the actual backend.
To configure proxy rules, edit the option config/ in it. The dev server is proxying using http proxy middleware, so you should refer to its documentation for detailed usage. But here is a simple example:
// config/
= {
// ...
dev: {
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
'/api': {
target: '',
changeOrigin: true,
pathRewrite: { //Rewrite needs to be rewrite, if it is processed on the server side, you can do not '^/api': ''
}
}
}
}
}
The above example will proxy requests /api/posts/1 to /posts/1.
if
pathRewrite: {
‘^/api': ‘api'
},
Then the proxy requests /api/posts/1 to /api/posts/1.
URL matching
In addition to static URLs, you can also use glob patterns to match URLs, such as /api/**. For more information, see Context Matching. Additionally, you can provide an option that filter can be a custom function to determine whether the request should be proxied:
proxyTable: {
'*': {
target: '',
filter: function (pathname, req) {
return ('^/api') && === 'GET'
}
}
}
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.