How Vue-cli proxyTable solves cross-domain problems in the development environment

This article mainly introduces the detailed explanation of Vue-cli proxyTable to solve cross-domain problems in the development environment. It is of great practical value. Friends who need it can refer to

They always face when jointly debugging with the backend. Annoying cross-domain problem, I also encountered this problem when developing a project based on Vue recently. Both sides thought of a lot of methods, checked a lot of information, and added a lot of parameters. In the end, I had to map my localhost to the one when it goes online. The domain name to be used.

When I was looking through the code today, I suddenly discovered that there is a parameter called proxyTable in the config file of vue-cli. Looking at this name, I felt that it could solve the problem, so I searched for it, and sure enough. In vuejs-templates, which is the template plug-in used by vue-cli, there are instructions about API proxy, and this parameter is used.

https://vuejs-templates.github.io/webpack/proxy.html

This parameter is mainly an address mapping table, you can set the complex The url is simplified. For example, the address we want to request is api.xxxxxxxx.com/list/1, which can be set as follows:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

In this way we are writing the url When , just write /list/1 to represent api.xxxxxxxx.com/list/1.

So how to solve the cross-domain problem? In fact, there is a changeOrigin parameter in the 'list' parameter above, which receives a Boolean value. If it is set to true, then a local virtual server will receive your request and send the request on your behalf, so that there will be no cross-domain The problem is, of course this only applies to development environments. The added code is as follows:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

This setting of vue-cli comes from the plug-in http-proxy-middleware

github: https://github.com/chimurai/http-proxy-middleware

If you want to learn more, you can read the plug-in configuration instructions. It seems to also support websocket, which is a very powerful plug-in.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the operation of submitting data for vue.js front-end and back-end data interaction

How to solve vue- Problem that stylus cannot be used in cli

The above is the detailed content of How Vue-cli proxyTable solves cross-domain problems in the development environment. For more information, please follow other related articles on the PHP Chinese website!