Vue配置代理詳解

一、vue配置代理解決跨域

在前端開發中，經常遇到跨域問題，而Vue提供了代理的方式解決跨域問題。下面將介紹如何在Vue中配置代理來解決跨域問題。

首先，在Vue CLI項目中需要安裝http-proxy-middleware模塊:

npm install http-proxy-middleware

接下來在vue.config.js中進行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上配置將請求介面中含有”/api”的地址都轉發到http://localhost:3000的地址上，同時開啟了changeOrigin，保證請求頭中的Host值為target地址的域名，而非訪問地址的域名。pathRewrite的作用是將請求地址中的”/api”替換為””。

二、vue配置多個代理

如果一個項目中需要請求多個介面，那麼可以使用Vue配置多個代理的方式來轉發請求。

在vue.config.js中進行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/sso/login': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/sso': ''
        }
      }
    }
  }
}

以上配置規定了/api請求將會被轉發到http://localhost:3000上，而/sso/login請求將會被轉發到http://localhost:8080上。

三、vue配置代理報錯

在實際開發過程中，可能會遇到代理報錯的問題，比如代理設置後該介面一直無法請求到數據。

解決方案為：修改proxy的配置，使其與後端的介面路徑保持一致。

module.exports = {
  devServer: {
    proxy: {
      '/login': {
        target: 'http://localhost:3000/login',
        changeOrigin: true,
        pathRewrite: {
          '^/login': ''
        }
      }
    }
  }
}

以上配置中，target的路徑需要和後端介面的路徑一致。這樣就能夠成功請求到數據，解決代理報錯的問題。

四、vue配置代理伺服器未響應

在調試過程中，可能會遇到代理伺服器無法響應的問題，這時需要檢查下面一些問題：

是否存在重複的埠號
是否開啟了防火牆，需要將埠對應設為放行狀態
檢查請求路徑是否正確，是否與後端對應
檢查後端是否已開啟服務

五、vue配置代理伺服器

如果需要將本地項目部署到伺服器上，那麼需要在遠程伺服器上配置代理。

在vue.config.js中進行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.example.com/api',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在遠程伺服器上需要開啟代理配置，將/api請求轉發到後端的地址上，這樣就能夠實現跨域請求。

六、vue配置代理proxy

在使用vue-resource時，可以在main.js中配置代理，實現跨域請求。

在main.js中進行配置：

import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.root = 'http://localhost:3000'
Vue.http.options.emulateJSON = true
Vue.http.options.xhr = {withCredentials: true}
Vue.http.options.emulateHTTP = true
Vue.http.interceptors.push((request, next) => {
  request.headers.set('X-CSRFToken', 'TOKEN')
  request.credentials = true
  next()
})

以上配置規定了請求的根路徑為http://localhost:3000，開啟了跨域請求、使用JSON格式傳輸數據、開啟了跨域Cookie傳輸數據、開啟了cors跨域請求，同時設置了CSRF的請求頭。

七、vue配置代理不生效

在配置代理時，可能會遇到代理不生效的問題，解決方案如下：

檢查是否已開啟開發模式下的webpack-dev-server，如果未開啟需運行npm run serve
檢查是否已正確設置代理配置
檢查是否已正確使用代理服務
檢查請求地址是否寫正確
嘗試使用postman測試介面，避免前端開發過程中出現無關的因素

八、vue配置代理element 跨域

在使用Vue框架下，常使用Element組件庫進行開發，而在開發過程中，可能會遇到Element跨域請求的問題。

解決方案為：在vue.config.js中進行配置，同時設置請求頭信息。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
          'Access-Control-Allow-Methods': 'PUT,POST,GET,DELETE,OPTIONS'
        }
      }
    }
  }
}

以上配置中，設置了Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods等請求頭信息，保證請求頭信息正確。

九、vue配置代理sso是什麼

SSO（Single Sign On）即單點登錄，是一種常用的用戶認證技術。

在Vue項目中使用SSO技術時，需要在vue.config.js中進行相關配置。

module.exports = {
  devServer: {
    proxy: {
      '/sso': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/sso': ''
        }
      }
    }
  }
}

以上配置將/sso請求轉發到http://localhost:8080上進行驗證，保證了SSO在Vue中的使用。

以上就是Vue配置代理的詳細闡述，包括如何解決跨域問題、如何配置多個代理、解決代理報錯、配置代理伺服器等多個方面。我們必須正確掌握Vue中代理的相關知識，在實際開發中遇到問題能快速解決，並提高開發效率。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/150433.html