這篇文章主要介紹了VueJs如何將接口用webpack代理到本地，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
目前我們已經(jīng)順利的從cnodejs.org請(qǐng)求到了數(shù)據(jù)，但是大家可以注意到我們的/src/api/index.js的第一句就是：
// 配置API接口地址 var root = 'https://cnodejs.org/api/v1'
這里我們的接口地址是寫死的，這固然是一個(gè)問(wèn)題，但是其實(shí)并不是最重要的，而是在cnodejs.org已經(jīng)幫我們把接口處理的很好了，幫我們解決了跨域問(wèn)題。而在實(shí)際開發(fā)中，很多項(xiàng)目接口是不允許我們跨域請(qǐng)求的。
而在第一章說(shuō)到的前后端分離開發(fā)模式，前端開發(fā)前端，同時(shí)后端也在開發(fā)接口，那這個(gè)時(shí)候我們前端工程師不可能到服務(wù)器上直接開發(fā)，或者在本地搞一套服務(wù)器環(huán)境，如果是這樣就違背了我們前后端分離開發(fā)的初衷。
那么如何解決這個(gè)問(wèn)題呢？其實(shí)很簡(jiǎn)單，要知道 跨域不是接口的限制 而是瀏覽器為了保障數(shù)據(jù)安全做的限制。因此，一種方法可以解決，那就是打開瀏覽器的限制，讓我們可以順利的進(jìn)行開發(fā)。但是無(wú)奈的是，最新的 chrome 瀏覽器好像已經(jīng)關(guān)閉了這個(gè)選項(xiàng)，那么我們只能采用另外一種方法了——將接口代理到本地。
配置 webpack 將接口代理到本地
好在，vue-cli 腳手架工具，已經(jīng)充分的考慮了這個(gè)問(wèn)題，我們只要進(jìn)行簡(jiǎn)單的設(shè)置，就可以實(shí)現(xiàn)我們的目的。
我們打開 /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: {}, 這一行，就是給我們配置代理的。根據(jù) cnodejs.org 的接口，我們把這里調(diào)整為：
proxyTable: {
'/api/v1/**': {
target: 'https://cnodejs.org', // 你接口的域名
secure: false,
changeOrigin: false,
}
}我們這樣配置好后，就可以將接口代理到本地了。
更多關(guān)于接口的配置請(qǐng)參見(jiàn)：https://github.com/chimurai/http-proxy-middleware#options
更多關(guān)于webpack 接口配置請(qǐng)參見(jiàn)：https://webpack.js.org/configuration/dev-server/#devserver-proxy
重新配置 src/api/index.js 文件
在上面我們的代理已經(jīng)配置好了，但是我們的/src/api/index.js還需要調(diào)用人家的地址，所以我們來(lái)重新配置/src/api/index.js文件，如下
// 配置API接口地址 var root = '/api/v1'
跨域問(wèn)題一般僅存在于開發(fā)環(huán)境上，到實(shí)際生產(chǎn)環(huán)境上一般不存在跨域問(wèn)題了，所以采用這種方式來(lái)進(jìn)行配置，能很好的解決跨域問(wèn)題。值得注意的是，配置完代理后是不會(huì)立即生效的，需要重啟服務(wù)器。
我們按Ctrl+c先停掉服務(wù)，然后再用cnpm run dev重啟服務(wù)即可。
cnpm run dev
重啟完成后，打開瀏覽器，在F12開發(fā)者工具里，可以看到如下：
可以看到我們請(qǐng)求的接口地址已經(jīng)變成了localhost也就是本機(jī)，說(shuō)明我們的接口已經(jīng)成功的代理到本地了。再切換到Priview選項(xiàng)卡來(lái)看一下數(shù)據(jù)是否正常返回：
如果出現(xiàn)上圖，則說(shuō)明數(shù)據(jù)也正常的返回了，這樣我們已經(jīng)順利的將接口代理到了本地，并且讀取到了數(shù)據(jù)。開始準(zhǔn)備下面的工作吧！
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VueJs如何將接口用webpack代理到本地”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
