詳解Vue-cli代理解決跨域問題
使用vue-cli調(diào)接口的時(shí)候，總是會出現(xiàn)垮與問題，因?yàn)関ue的localhost與訪問域名不一致導(dǎo)致。而這一點(diǎn)，開發(fā)者顯然也想到了，故而在vuejs-templates，也就是vue-cli的使用的模板插件里，有關(guān)于API proxy的說明，這個(gè)配置就是將localhost映射成訪問的域名。
那么何為代理？
代理服務(wù)器英文全稱是Proxy Server，其功能就是代理網(wǎng)絡(luò)用戶去取得網(wǎng)絡(luò)信息。形象的說：它是網(wǎng)絡(luò)信息的中轉(zhuǎn)站。可以簡單粗暴理解為把你的域名轉(zhuǎn)換成你訪問的域名，（我這么記的，當(dāng)然可能并不恰當(dāng)）形成同源，就能訪問。
那么在vue里，如何設(shè)置代理？
1.config目錄找到index.js
2.在dev里添加proxyTable
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api':{
target:"http://47.93.166.112/BrainPcWeb",//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
changeOrigin:true,
pathRewrite:{
'^/api':''//這里理解成用‘/api'代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替
//比如我要調(diào)用'http://40.00.100.133:3002/user/login'，直接寫‘/api/user/login'即可
}
}
}
這一步為止，你重新run一下vue已經(jīng)不存在跨域問題了。
如果你想在main.js把a(bǔ)pi定義成全局變量也可以這樣，雖然多此一舉。代碼如下：
Vue.prototype.HOST = '/api' //這時(shí)，你的/api/user/login就可以換成this.HOST/user/login
但是注意了
這只是開發(fā)環(huán)境（dev）中解決了跨域問題，生產(chǎn)環(huán)境中真正部署到服務(wù)器上如果是非同源還是存在跨域問題
部署到服務(wù)器上跨域解決問題，以后項(xiàng)目布置會繼續(xù)更新。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu)，el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能，需要的朋友可以參考下2022-04-04
指令是Vue.js中一個(gè)重要的特性， 主要提供了一種機(jī)制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧2017-10-10
這篇文章主要介紹了vue中的封裝常用工具類，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
本文給大家分享vue自定義組件的四種方式，通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-02-02
這篇文章主要介紹了vue.js body的css不生效問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
本篇文章主要介紹了Vue中添加過渡效果的方法，Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過渡效果，有興趣的同學(xué)可以了解一下。2017-03-03
這篇文章主要介紹了vue3.0中sass全局的使用過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3響應(yīng)式Object代理對象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對象的讀取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Vue實(shí)現(xiàn)push數(shù)組并刪除的例子
今天小編就為大家分享一篇Vue實(shí)現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11