vue項目proxyTable配置小結

Posted on by

前言

proxyTable是一個用於Vue.js應用程序的配置選項，它允許您在開發過程中代理後端API請求。這一功能的作用是解決由於瀏覽器的同源策略所限制而導致的跨域請求問題。當前端應用程序部署在一個Web服務器上並向不同的後端API發送請求時，這個功能就變得尤為重要。

在Vue.js應用程序中使用proxyTable的主要優點是能夠簡化配置，方便地進行本地開發和調試。在開發過程中，可以將所有的API請求都代理到本地的開發環境中，從而避免瞭跨域請求的問題，並且可以通過簡單地更改proxyTable配置來切換後端API的地址。此外，還可以通過proxyTable輕松地模擬網絡延遲和錯誤，以測試應用程序處理這些情況的能力。

總之，proxyTable是一個非常有用的工具，可以幫助Vue.js應用程序開發人員輕松地解決跨域請求問題，並加快開發和調試的速度。
1，瀏覽器的同源策略不允許跨域訪問，所謂同源策略是指協議、域名、端口相同
2，在使用webpack做構建工具的項目中使用proxyTable代理實現跨域是一種比較方便的選擇。

如何配置proxyTable

找到根目錄下config文件夾下的index.js文件。由於我們是在開發環境下使用，配置在dev裡面：

 dev: {
    env: require('./dev.env'),
    port: 8070,
    autoOpenBrowser: true,
    assetsSubDirectory: './',
    assetsPublicPath: '/',
    // quiet: true, // 如果使用webpack-dev-server，需要設為true，禁止顯示devServer的console信息
    proxyTable: {
      '/base': {
        target: 'https://xxxxx/',
        changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
        pathRewrite: {
          '^/base': '/'   // 重寫接口
        }
      },
    },

和pre環境配置/base相匹配
上面這段代碼的效果就是將以/base字段起始的本地接口請求代理到瞭https://xxxxx/這一域名下：

//先人為給接口地址前面加上一個自定義的項目名
const VUE_APP_CALL='"/base/api/app/tcloud-scrm-call"'
項目名base是我們人為加上去的，經過代理之後就沒瞭，這樣我們在配置代理這裡隻需要配置一份就夠瞭，隻是在寫接口地址時要註意區分開發環境和線上環境就可以瞭

在這個文件下配置環境地址域名server

關於proxyTable的原理

在Vue.js應用程序中，當proxyTable選項被配置時，請求將首先被發送到Webpack開發服務器。如果請求的URL與proxyTable中的某個屬性匹配，則該請求將被代理到指定的後端API服務器，而不是直接向目標服務器發送請求。代理過程實際上是在開發環境中創建瞭一個反向代理服務器。

反向代理服務器接收到請求之後，將對其進行一些處理，並將其轉發到後端API服務器。這樣做的好處是我們可以通過反向代理服務器來控制請求的流量、限制跨域請求並提高安全性。同時，通過配置proxyTable選項，我們還可以在開發和生產環境中使用相同的API地址，從而減少出錯的可能性。

總之，proxyTable選項的原理是在Webpack開發服務器和反向代理服務器的幫助下，將請求轉發到後端API服務器，以實現跨域請求的代理和控制。

到此這篇關於vue項目proxyTable配置小結的文章就介紹到這瞭,更多相關vue proxyTable配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：