Vue-cli project proxy proxytable configuration exclude Method

Problem description

If it is a project with frontend and backend separation, the local development environment needs to access mock, or directly access the online interface during debugging, there will be an Interface Cross-origin problem (Mock does not have a cross-origin problem, however, this method is easy to configure ). For a project generated by Vue-CLI, You need to configure the proxytable attribute in config/index. JS, which is roughly as follows:

?

12345678

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

You can search for proxytable on the Internet for configuration rules. Today we are talking about another problem. Please refer to the following code:

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344

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/‘}}},

A clear sentence (see below) can solve the problem. Why should I write it like this? Is it because the user has not learned well?

?

12345

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

Of course it's not that easy. The reason is that the backend does not separate the API from the template when designing the interface, and they are all in a namespace (for example, the Homepage Address is/M/index ). At this time, if you configure the template as above, even the template interface will be replaced by a proxy, so you can only write the interface one by one. It is really the frontend that gives the backend back-end the back-end to back the pot! Is there a more elegant way? Such as exclude?

We found that the plug-in implementing the proxy function is http-proxy-middleware. We found this section in the document:

?

123456

proxy(‘**‘, {...}) matches any path, all requests will be proxied.proxy(‘**/*.html‘, {...}) matches any path which ends with .htmlproxy(‘/*.html‘, {...}) matches paths directly under path-absoluteproxy(‘/api/**/*.html‘, {...}) matches requests ending with .html in the path of /apiproxy([‘/api/**‘, ‘/ajax/**‘], {...}) combine multiple patternsproxy([‘/api/**‘, ‘!**/bad.json‘], {...}) exclusion

Note that the last one supports exclude. In the example above, as long as the key value is written like ['/M /**','! /M/Index. However! Have you ever seen the object key be an array? Well, let's look at the source code.

Note: In our project, the previous Vue-cli version is 2.8.2 and the version I tested is 2.9.1. The two versions are different. Let's talk about them one by one.

Let's start with version 2.9.1, which does not have build/dev-server.js and similar files, and uses webpack-Dev-server directly. After reading the source code, I found that the proxy receiving parameters of webpack-Dev-server are actually an array with a context value, is to pass the first http-proxy-middleware parameter. Therefore, we don't have to be dumpily afraid to follow the Vue-CLI, just change it to the following one.

?

1234	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/dev-server.js file, about 50 lines, with code similar to the following

?

12345678

// proxy api requestsObject.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === ‘string‘) { options = { target: options } } app.use(proxyMiddleware(options.filter || context, options))})

We can see that the context here only takes into account the string situation, and there is no way. Let's change it by ourselves and add a method.

?

12345678

// proxy api requestsObject.keys(proxyTable).forEach(function (context) { var options = proxyTable[context] if (typeof options === ‘string‘) { options = { target: options } } app.use(proxyMiddleware(options.filter || context.split(‘,‘), options))//context -> context.split(‘,‘)})

In this way, all the keys you pass in will become arrays. Then, in the proxytable configuration, just write as follows:

?

12345

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

Yes. Now we have two versions. I am so tired of obsessive-compulsive disorder. I will take a break... Optimization later

 

Jiefang programmers (yuan) Hands-Ios automated testing those dry goods Video Course: Baidu online disk download
Selenium2 automated test from scratch video: Baidu online storage download
Glory road Android automated testing advanced practice: Baidu online disk download
Quick Start With jmeter performance testing tools video tutorial: Baidu online storage download
Android mobile app performance tests based on ddms: Baidu online disk download
System learning Android system white box testing and automated testing full recording: Baidu online disk download
Introduction to zero-Basic self-learning Android uiautomator automated testing series development knowledge system diagram video tutorial: Baidu online disk download
In 2016, Tom ios9 OC swift2.0 was trained in the fifth training phase. HD video tutorial 80g: Baidu online disk download
Beginner iOS development engineer of geek college + intermediate + advanced video tutorial: Baidu online disk download
Geek college C # video tutorial: Baidu online storage download
Basic + intermediate + advanced training for Android engineers at geek College: Baidu online storage download
Full-stack front-end video for graduation of Everest training in March: Baidu online disk download
Getting started with games and getting involved: Baidu online disk downloads
Brother's new web front-end video tutorial: Baidu online disk download
New PHP video tutorial for brothers (346 lectures in total): Download from Baidu online storage
Tutorial on secondary development and construction of public platform interfaces: Baidu online storage download
Mengniu 2nd-unity2d game development classic Tutorial: Baidu online storage download
Unity3d arpg online game programming practice: Baidu online disk download
Mengniu unity development fifth season C # programming and development swing helicopter instance Tutorial: Baidu online disk download
Four major dimensions to unlock webpack 3.0 front-end engineering: Baidu online disk download

Vue-cli project proxy proxytable configuration exclude Method