vue中的proxyTable反向代理(親測有用)

更新時間：2022年04月14日 10:28:06 作者：小三金

這篇文章主要介紹了vue中的proxyTable反向代理(親測有用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

proxyTable反向代理

proxyTable的設(shè)置網(wǎng)上有的是，以前也沒管過，但新公司的項目需要用到，所以就徹底研究一下，結(jié)果繞了好大的彎子！

注：每次設(shè)置完proxyTable，請一定要重啟，刷新不好使 npm run dev!

開始前，請勞記上面操作，我就在這繞了很大的彎，一直以為頁面刷新就行了，但是，webpack好像很特別的存在一樣，它不執(zhí)行。好了，開始配置：

1.打開vue項目->config->index.js

并找到proxyTable屬性

proxyTable: {
      '/api': { // '/api':匹配項
        target: 'http://192.168.31.167:8091', // 接口的域名
        // secure: false,// 如果是https接口，需要配置這個參數(shù)
        changeOrigin: true, // 如果接口跨域，需要進行這個參數(shù)配置
        pathRewrite: { // 如果接口本身沒有/api需要通過pathRewrite來重寫了地址
          '^/api': '/'
        }
      }
    }

說明：具體如何跨域的，請自行查找

2.打開一個vue頁面

設(shè)置一個按鈕，和一個方法，注意請求url寫法

http://192.168.31.167:8091/listUsers，這是我在本機用node.js寫的一個簡單的get請求，至于測試API，自行解決。

‘/api/listUsers’

/api 相當(dāng)于 http://192.168.31.167:8091

webpack，會自動幫你轉(zhuǎn)過去。

 handleTest() {
        let _this = this;
        //axios被掛到vue上了，做個全局
        _this.$axios.get('/api/listUsers')
          .then(function(response) {
            console.log(response);
          })
          .catch(function(error) {
            console.log(error);
          });
 
      },

3.npm run dev

去查看你的頁面，并點擊按鈕

提示：跨域開發(fā)時，有兩個選擇

后臺把跨條件設(shè)置允許，具體實現(xiàn)問你的后臺。那么前臺就正常訪問即可。（最簡單，最暴力，但對于后臺來說不安全）
如果后臺不設(shè)置，那前臺必須得設(shè)置跨配置，也就是proxyTable配置。具體原理自己去搜webpack的proxy配置。
一定要切記重啟，npm run dev!!!

反向代理的實現(xiàn)原理

實現(xiàn)原理

反向代理需要用到nginx。反向代理是在服務(wù)器端進行處理。首先修改hosts文件，將域名指向開發(fā)者的電腦本身，把自己偽裝成服務(wù)端，再通過nginx對不同的請求進行轉(zhuǎn)發(fā)，把靜態(tài)資源指向開發(fā)者本地電腦的資源，將接口指向?qū)嶋H的服務(wù)器。

可以理解為把飯店設(shè)置在了黑社會的樓下，去樓下買醬排骨飯的時候，飯店米飯自己做，醬排骨則偷偷跑去別的飯店買。