問題描述

如果是前后端分離的項目，本地開發環境需要訪問mock，或者在調試時直接訪問線上的接口，這時候就會有接口跨域的問題（mock不存在跨域問題，但是用這個方法配置起來方便，姑且算是一個問題）。以vue-cli生成的項目為例，需要配置 config/index.js 中的 proxyTable 屬性，大概如下：

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

配置規則在網上搜proxyTable就能搜到，這里不做贅述。今天要說的是另一個問題，請見下面的代碼：

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

明明一句（見下）就能解決的問題，為什么要寫成這個樣子？難道就是因為使用者沒有學好？

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

事情當然沒這么簡單。原因是，后端在設計接口時，沒有把api和模板分開，都在一個命名空間下（比如，首頁的地址是 /m/index）。這時候，如果按照上面那樣配置，連模板接口也會被代理掉，所以只能一個一個的寫，實在是前端在給后端背鍋啊！那么有沒有更優雅的辦法呢？比如exclude之類的？

我們發現，實現代理功能的插件是http-proxy-middleware，在文檔中我們發現了這一段：

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

注意最后一條，此插件是支持exclude的。以我們上面的例子來說，只要key的值寫成類似 ['/m/**' , '!/m/index'] 這樣的就行了。可是！你見過object的key是個array的嗎？好吧，不啰嗦，直接看源碼。