為什么要使用proxyTable
- 很簡單，兩個字，跨域。
- 在平時項目的開發環境中，經常會遇到跨域的問題，尤其是使用vue-cli這種腳手架工具開發時，由於項目本身啟動本地服務是需要占用一個端口的，所以必然會產生跨域的問題。當然跨域有多種解決方式，這里就不一一例舉，下次弄篇文章單獨講，在使用webpack做構建工具的項目中使用proxyTable代理實現跨域是一種比較方便的選擇。
如何使用proxyTable
還是拿之前使用過的vue-cli舉例。我們首先要在項目目錄中找到根目錄下config文件夾下的index.js文件。由於我們是在開發環境下使用，自然而然是要配置在dev里面：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://www.abc.com', //目標接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/api' //重寫接口
}
},
cssSourceMap: false
}
上面這段代碼的效果就是將本地8080端口的一個請求代理到了http://www.abc.com這一域名下：
'http://localhost:8080/api' ===> 'http://www.abc.com/api'
沒有統一項目名下的使用
上面那種情況是有一個統一的項目名api的，所以說是比較好匹配的，就相當於說直接將以api開頭的接口名代理一下換成目標域名訪問就好了，可是如果說后台返給我們前端的接口沒有了統一的項目名呢？之前，我是一個個單獨去做了轉換，接口少還沒什么關系，但多了肯定是不現實的，前段時間在一次面試中受到了面試官的啟發想到了這樣一種取巧的方案：
//先人為給接口地址前面加上一個自定義的項目名
let someApi = 'api' + '/xx/xx';
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://www.abc.com', //目標接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '/' //重寫接口
}
},
cssSourceMap: false
}
這里的項目名api是我們人為加上去的，經過代理之后就沒了，這樣我們在配置代理這里還是只需要配置一份就夠了，只是在寫接口地址時要注意區分開發環境和線上環境就可以了。
關於proxyTable的原理
我在網上查了一下，這個代理實際上是利用http-proxy-middleware這個插件完成的，具體到這個插件的運行機制，由於是英文再加上能力有限就沒深究了。但我想探究的是這種代理方式實際上是如何做到的，我看網上有人說實際上就是我們的本地服務器將請求轉發給了目標服務器。之所以出現跨域是因為瀏覽器有同源策略的限制，但服務器是沒有的，所以這種代理方式能夠實現的機制大體就是：
本地服務器 --》 代理 --》目標服務器 --》拿到數據后通過代理偽裝成本地服務請求的返回值 ---》然后瀏覽器就順利收到了我們想要的數據
這是我的簡單理解，按這個理解來說的話只要服務器允許跨域，任何人都能夠拿到它的數據嗎？那樣同源策略不就大大弱化了嗎？目前對這個問題還不是太理解，希望有想法的小伙伴留言指正！