VueJs如何將接口用webpack代理到本地-創新互聯

這篇文章主要介紹了VueJs如何將接口用webpack代理到本地，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

專注于為中小企業提供網站設計制作、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業徐州免費做網站提供優質的服務。我們立足成都，凝聚了一批互聯網行業人才，有力地推動了上1000+企業的穩健成長，幫助中小企業通過網站建設實現規模擴充和轉變。

目前我們已經順利的從cnodejs.org請求到了數據，但是大家可以注意到我們的/src/api/index.js的第一句就是：

// 配置API接口地址

var root = 'https://cnodejs.org/api/v1'

這里我們的接口地址是寫死的，這固然是一個問題，但是其實并不是最重要的，而是在cnodejs.org已經幫我們把接口處理的很好了，幫我們解決了跨域問題。而在實際開發中，很多項目接口是不允許我們跨域請求的。

而在第一章說到的前后端分離開發模式，前端開發前端，同時后端也在開發接口，那這個時候我們前端工程師不可能到服務器上直接開發，或者在本地搞一套服務器環境，如果是這樣就違背了我們前后端分離開發的初衷。

那么如何解決這個問題呢？其實很簡單，要知道 跨域不是接口的限制 而是瀏覽器為了保障數據安全做的限制。因此，一種方法可以解決，那就是打開瀏覽器的限制，讓我們可以順利的進行開發。但是無奈的是，最新的 chrome 瀏覽器好像已經關閉了這個選項，那么我們只能采用另外一種方法了——將接口代理到本地。

配置 webpack 將接口代理到本地

好在，vue-cli 腳手架工具，已經充分的考慮了這個問題，我們只要進行簡單的設置，就可以實現我們的目的。

我們打開 /config/index.js 文件，找到以下代碼：

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

 

// Various Dev Server settings

host: 'localhost', // can be overwritten by process.env.HOST

port: 8080, // can be overwritten by process.env.HOST, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

 

// Use Eslint Loader?

// If true, your code will be linted during bundling and

// linting errors and warnings will be shown in the console.

useEslint: true,

// If true, eslint errors and warnings will also be shown in the error overlay

// in the browser.

showEslintErrorsInOverlay: false

其中，proxyTable: {}, 這一行，就是給我們配置代理的。根據 cnodejs.org 的接口，我們把這里調整為：

proxyTable: {

  '/api/v1/**': {

    target: 'https://cnodejs.org', // 你接口的域名

    secure: false,

    changeOrigin: false,

  }

}

我們這樣配置好后，就可以將接口代理到本地了。

更多關于接口的配置請參見：https://github.com/chimurai/http-proxy-middleware#options

更多關于webpack 接口配置請參見：https://webpack.js.org/configuration/dev-server/#devserver-proxy

重新配置 src/api/index.js 文件

在上面我們的代理已經配置好了，但是我們的/src/api/index.js還需要調用人家的地址，所以我們來重新配置/src/api/index.js文件，如下

// 配置API接口地址

var root = '/api/v1'

跨域問題一般僅存在于開發環境上，到實際生產環境上一般不存在跨域問題了，所以采用這種方式來進行配置，能很好的解決跨域問題。值得注意的是，配置完代理后是不會立即生效的，需要重啟服務器。

我們按Ctrl+c先停掉服務，然后再用cnpm run dev重啟服務即可。

cnpm run dev

重啟完成后，打開瀏覽器，在F12開發者工具里，可以看到如下：

可以看到我們請求的接口地址已經變成了localhost也就是本機，說明我們的接口已經成功的代理到本地了。再切換到Priview選項卡來看一下數據是否正常返回：

如果出現上圖，則說明數據也正常的返回了，這樣我們已經順利的將接口代理到了本地，并且讀取到了數據。開始準備下面的工作吧！

感謝你能夠認真閱讀完這篇文章，希望小編分享的“VueJs如何將接口用webpack代理到本地”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯成都網站設計公司，關注創新互聯成都網站設計公司行業資訊頻道，更多相關知識等著你來學習!

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

新聞名稱：VueJs如何將接口用webpack代理到本地-創新互聯
標題路徑：http://m.kartarina.com/article48/eoiep.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、域名注冊、Google、定制開發、定制網站、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯