詳解vue-cli本地環(huán)境API代理設(shè)置和解決跨域
前言
我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的，localhost是沒有辦法設(shè)置cookie的。
我們可以在vue-cli配置文件里面設(shè)置一個代理，跨域的方法有很多，通常需要后臺來進(jìn)行配置。我們可以直接通過node.js代理服務(wù)器來實現(xiàn)跨域請求。
vue proxyTable接口跨域請求調(diào)試
在vue-cli項目中的config文件夾下的index.js配置文件中，dev長這樣子：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
}
服務(wù)器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；
在config中新建一個文件命名為proxyConfig.js :
module.exports = {
proxy: {
'/apis': { //將www.exaple.com印射為/apis
target: 'https://www.exaple.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite的,
}
}
}
}
config文件夾下的index.js引入proxyConfig.js：
var proxyConfig = require('./proxyConfig')
config文件夾下的index.js中的dev改成:
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: proxyConfig.proxy,
cssSourceMap: false
}
重啟項目npm run dev：
你會發(fā)現(xiàn)出現(xiàn)了這個
這個時候我們已經(jīng)設(shè)置好了本地API代理了
修改本地hosts文件
文件路徑一般是C:\Window\System32\drivers\etc，打開hosts文件，在這一段下面把localhost設(shè)置進(jìn)去
# localhost name resolution is handled within DNS itself. # 127.0.0.1 localhost # ::1 localhost 127.0.0.1 activate.adobe.com 127.0.0.1 practivate.adobe.com 127.0.0.1 lmlicenses.wip4.adobe.com 127.0.0.1 lm.licenses.adobe.com 127.0.0.1 na1r.services.adobe.com 127.0.0.1 hlrcv.stage.adobe.com localhost www.exaple.com
搞定
此時我們已經(jīng)完全解決了跨域問題，以及本地測試后臺無法向我們本地環(huán)境設(shè)置cookie的情況了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談vue權(quán)限管理實現(xiàn)及流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實現(xiàn)在v-html的html字符串中綁定事件
今天小編就為大家分享一篇vue實現(xiàn)在v-html的html字符串中綁定事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
詳解vue中點擊空白處隱藏div的實現(xiàn)（用指令實現(xiàn)）
本篇文章主要介紹了詳解vue中點擊空白處隱藏div的實現(xiàn)（用指令實現(xiàn)），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了Vue中關(guān)于重新渲染組件的方法及總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式
這篇文章主要介紹了Vue實現(xiàn)戶籍管理系統(tǒng)戶籍信息的添加與刪除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)圖片滑動驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
vue2 設(shè)置router-view默認(rèn)路徑的實例
今天小編就為大家分享一篇vue2 設(shè)置router-view默認(rèn)路徑的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在vue單頁中，我們可以通過監(jiān)控route對象，從中匹配信息去決定是否驗證token，然后定義后續(xù)行為。下面通過實例代碼給大家分享vue登錄注冊及token驗證功能，需要的朋友參考下吧2017-12-12
本節(jié)，我們將討論關(guān)于AST的轉(zhuǎn)換。所謂AST的轉(zhuǎn)換，指的是對AST進(jìn)行一系列操作，將其轉(zhuǎn)換為新的AST的過程。新的AST可以是原語言或原DSL的描述，也可以是其他語言或其他DSL的描述。例如，我們可以對模板AST進(jìn)行操作，將其轉(zhuǎn)換為JavaScriptAST2023-01-01