vue-cli project proxy proxyTable configuration exclude method

Problem description

If it is a project separated by front and back ends, the local development environment needs to access mock, or directly access the online interface during debugging, there will be a cross-domain problem with the interface (mock does not have cross-domain problem, but it is convenient to configure this method, which is a problem for now). Taking the project generated by vue-cli as an example, you need to configure the proxyTable property in config/, roughly as follows:

 proxyTable: {
 '/pc/my/list/': {
 target: 'http://10.132.20.14:8083/mockjsdata/66',
 pathRewrite: {
  '^/pc/my/list/': '/pc/my/list/'
 }
 }
 },

You can find the configuration rules by searching proxyTable online, so I won't go into details here. What I want to talk about today is another question, please see the following code:

 proxyTable: {
 '/m/userinfo/': {
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/userinfo/': '/mockjsdata/66/m/userinfo/'
 }
 },
 '/m/my/ajax/list/': {
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/my/ajax/list/': '/mockjsdata/66/m/my/ajax/list/'
 }
 },
 '/m/tkpreinterview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/tkpreinterview': '/mockjsdata/66/m/tkpreinterview'
 }
 },
 '/m/preinterview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/preinterview': '/mockjsdata/66/m/preinterview'
 }
 },
 '/m/interview':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/interview': '/mockjsdata/66/m/interview'
 }
 },
 '/m/checkLogin':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/checkLogin': '/mockjsdata/66/m/checkLogin'
 }
 },
 '/m/my/ajax/vdetail/':{
 target: 'http://10.132.20.14:8083',
 pathRewrite: {
  '^/m/my/ajax/vdetail/': '/mockjsdata/66/m/my/ajax/vdetail/'
 }
 }
 },

Why do you need to write this problem that can be solved with just one sentence (see below)? Is it because the user has not learned it well?

 proxyTable:{
 '/m':{
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }
 },

Of course things are not that simple. The reason is that when designing the interface, the backend does not separate the API and the template, and they are both in the same namespace (for example, the address of the homepage is /m/index). At this time, if the configuration is as above, even the template interface will be proxyed, so you can only write one by one. It is really the front-end that is taking the blame for the back-end! So is there a more elegant way? For example, exclude or something?

We found that the plug-in that implements the proxy function ishttp-proxy-middleware, we found this paragraph in the documentation:

proxy('**', {...}) matches any path, all requests will be proxied.
proxy('**/*.html', {...}) matches any path which ends with .html
proxy('/*.html', {...}) matches paths directly under path-absolute
proxy('/api/**/*.html', {...}) matches requests ending with .html in the path of /api
proxy(['/api/**', '/ajax/**'], {...}) combine multiple patterns
proxy(['/api/**', '!**/'], {...}) exclusion

Note the last item, this plugin supports exclude. In our example above, as long as the value of the key is written like ['/m/**' , '!/m/index']. But! Have you ever seen the object key as an array? OK, don't talk too much, just look at the source code.

Let me explain that the vue-cli version I used in our project was 2.8.2, and the version I tried was 2.9.1. These two versions are different, let’s talk about them one by one.

Let’s talk about the 2.9.1 version generated. This version has no build/ and similar files, so it directly uses webpack-dev-server. After looking at the source code, I found that the proxy received parameters of webpack-dev-server are actually an array, and there is a context value inside, which is to pass the first parameter of http-proxy-middleware. So, we don’t have to follow what vue-cli gives and dare not move. Just change it to the following one.

 proxyTable: [{
 context: ['/m/**','!/m/index'],
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }],

OK, this version is relatively simple. Let’s talk about the 2.8.2 version

This version has a build/ file, which is about 50 lines, and has a code similar to the following

// proxy api requests
(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 (proxyMiddleware( || context, options))
})

You can see that the context here only takes into account the string situation. There is no way, let's change it yourself and add a method.

// proxy api requests
(proxyTable).forEach(function (context) {
 var options = proxyTable[context]
 if (typeof options === 'string') {
 options = { target: options }
 }
 (proxyMiddleware( || (','), options))//context -> (',')
})

In this way, the keys you pass in will become arrays. Then just write it as follows in the proxyTable configuration

 proxyTable:{
 'm/**,!/m/index':{
 target: 'http://10.132.20.14:8083/mockjsdata/66'
 }
 },

OK, now both versions are done. I am so tired of obsessive-compulsive disorder. I'll go and have a rest. . . Let's optimize again

The above method of configuring exclude from the proxyTable proxy in the above article is all the content I share with you. I hope you can give you a reference and I hope you can support me more.