vue的反向代理怎么配置

本篇內容主要講解“vue的反向代理怎么配置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue的反向代理怎么配置”吧!

在vue中，因為反向代理可以隱藏真實的服務端，繞過直接請求真正的url而導致的跨域，所以需要使用反向代理來避免出現跨域問題；反向代理常用在前后端分離開發的場景中，前端需要連接后端的接口，將同源的請求發送到反向代理服務器上。

本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。

為什么用vue的反向代理

反向代理使用場景

在前后端分離開發的場景，前端有個服務器（提供靜態頁面），后端有個服務器（提供接口）

此時，前端需要連接后端的接口，就會出現跨域問題

在發布環境中，如果存在跨域問題，使用nginx

如果前后端代碼在一個服務器，不存在跨域問題

跨域的解決方案

jsonp（前端解決方案）

CORS（后端解決方案）：cross origin resource sharing

反向代理（前端解決方案）

什么是反向代理

反向代理隱藏真實的服務端，讓瀏覽器依然是同源

反向代理原理

通過偽造請求使得http請求為同源的，然后將同源的請求發送到反向代理服務器上，由反向代理服務器去請求真正的url，這樣就繞過直接請求真正的url導致的跨域問題

反向代理的配置

vue-cli3的反向代理

在項目根目錄下新建vue.config.js文件

配置代碼：

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

反向代理執行過程：

axios訪問地址中的 /api 轉換為 target + /api：

（eg：http:localhost:9000/api/goods 轉換為 http://localhost:80/api/goods）

創建虛擬服務器

去掉/api：

（eg：http://localhost:80/goods）

到此，相信大家對“vue的反向代理怎么配置”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！