vue2.0 reverse proxy to solve cross domain (vue reverse proxy configuration)

Hello everyone! Today I'm here to share with you about vue2.0 reverse proxy to solve the problem of cross-domain, that is, the method of vue reverse proxy configuration. I hope it can help you to solve some troubles in development.

vue2.0 reverse proxy to solve cross domain (vue reverse proxy configuration)

First, let's discuss what is cross domain. In front-end development, we often encounter this situation: when our front-end code (such as based on the Vue.js framework development) is deployed in a domain name, while our back-end interface is deployed in another domain name, this time there will be a cross-domain situation. At this time, the browser will prevent our front-end code from accessing the interface under a different domain for security reasons, which brings some trouble to our development.

So how do you solve this cross-domain problem? This is to mention the reverse proxy of vue2.0. The so-called reverse proxy, as if it were our small secretary of the front desk, she receives guests visiting the front desk, and guests to find the background of the interface, she will help to transfer, so that the guests and the background do not need to talk directly, greatly reducing the unnecessary trouble.

How to configure it exactly? We can use proxyTable in the index.js file in the config folder to configure. Let's take a look at the sample code:

"`javascript
module.exports = {
dev: {
proxyTable: {
'/api': {
target: 'http://localhost:3000', // Fill in the domain name of the backend interface
changeOrigin: true, // whether cross-domain or not
pathRewrite: {
'^/api': " // Rewrite the path to remove /api
}
}
}
}
}
“`

In this sample code, we forward all requests that start with /api to http://localhost:3000这个域名下 and do some path rewriting. This way, our front-end code can access the backend interface without any problem.

concluding remarks

By configuring the reverse proxy of vue2.0, we have successfully solved the problem of cross-domain, so that the front-end code can smoothly access the backend interface under different domain names, which greatly improves the development efficiency and avoids unnecessary trouble. I hope this little trick can help you, so that you in the front-end development of the road more and more smoothly! Cheer Oh!