vue的反向代理怎么配置

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

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

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

為什么用vue的反向代理

反向代理使用場景

在前后端分離開發(fā)的場景，前端有個服務(wù)器（提供靜態(tài)頁面），后端有個服務(wù)器（提供接口）

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

在發(fā)布環(huán)境中，如果存在跨域問題，使用nginx

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

跨域的解決方案

jsonp（前端解決方案）

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

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

什么是反向代理

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

反向代理原理

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

反向代理的配置

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': ""
              }
          }
      }
   }
}

反向代理執(zhí)行過程：

axios訪問地址中的 /api 轉(zhuǎn)換為 target + /api：

（eg：http:localhost:9000/api/goods 轉(zhuǎn)換為 http://localhost:80/api/goods）

創(chuàng)建虛擬服務(wù)器

去掉/api：

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

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