利用vue怎么解決跨域問題?相信很多沒有經(jīng)驗(yàn)的人對此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個問題。
成都創(chuàng)新互聯(lián)公司成立于2013年,我們提供高端重慶網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、全網(wǎng)營銷推廣、小程序開發(fā)、微信公眾號開發(fā)、網(wǎng)站推廣服務(wù),提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來完成項(xiàng)目落地,為水泥攪拌車企業(yè)提供源源不斷的流量和訂單咨詢。
如何在vue里面優(yōu)雅的解決跨域,路由沖突問題
當(dāng)我們在路由里面配置成以下代理可以解決跨域問題
proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:3000' } },
這種配置方式在一定程度上解決了跨域問題,但是會帶來一些問題,
比如我們的vue 路由 也命名為 goods,這時候就會產(chǎn)生了沖突,
如果項(xiàng)目中接口很多,都在這里配置是很麻煩的,也容易產(chǎn)生路由沖突。
正確的姿勢
如果把所有的接口,統(tǒng)一規(guī)范為一個入口,在一定程度上會解決沖突
把以上配置統(tǒng)一前面加上 /api/
proxyTable: { '/api/**': { target: 'http://localhost:3000' }, },
如果我們配置成這種方式,在使用http請求的時候就會發(fā)生變化,會在請求前面加上一個api,相對路由也會發(fā)生變化,也會在接口前面加上api,這樣也會很麻煩,我們可以使用以下方式來解決這個問題
proxyTable: { '/api/**': { target: 'http://localhost:3000', pathRewrite:{ '^/api':'/' } }, },
上面這個代碼,就是把咱們虛擬的這個api接口,去掉,此時真正去后端請求的時候,不會加上api這個前綴了,那么這樣我們前臺http請求的時候,還必須加上api前綴才能匹配到這個代理,代碼如下:
logout(){ axios.post('/api/users/logout').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }, getGoods(){ axios.post('/api/goods/list').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }
我們可以利用axios的baseUrl直接默認(rèn)值是 api,這樣我們每次訪問的時候,自動補(bǔ)上這個api前綴,就不需要我們自己手工在每個接口上面寫這個前綴了
在入口文件里面配置如下:
import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Axios.defaults.baseURL = 'api'
如果這配置 'api/' 會默認(rèn)讀取本地的域
上面這樣配置的話,不會區(qū)分生產(chǎn)和開發(fā)環(huán)境
在config 文件夾里面新建一個 api.config.js 配置文件
const isPro = Object.is(process.env.NODE_ENV, 'production') module.exports = { baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/' }
然后在main.js 里面引入,這樣可以保證動態(tài)的匹配生產(chǎn)和開發(fā)的定義前綴
import apiConfig from '../config/api.config' import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Axios.defaults.baseURL = apiConfig.baseUrl
經(jīng)過上面配置后,在dom里面可以這樣輕松的訪問,也不需要在任何組件里面引入axios模塊了。
logout(){ this.$http.post('/users/logout').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }, getGoods(){ this.$http.post('/goods/list').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }
最終代碼
在代理里面配置
proxyTable: { '/api/**': { target: 'http://localhost:3000', pathRewrite:{ '^/api':'/' } }, },
在config里面的api.config.js 配置
在config 文件夾里面新建一個 api.config.js 配置文件
const isPro = Object.is(process.env.NODE_ENV, 'production') module.exports = { baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/' }
關(guān)于生產(chǎn)和開發(fā)配置不太了解
可以去 dev-server.js 里面看配置代碼
const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ? require('./webpack.prod.conf') : require('./webpack.dev.conf')
在main.js 入口文件里面配置
import apiConfig from '../config/api.config' import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Axios.defaults.baseURL = apiConfig.baseUrl 在dom里面請求api的姿勢 logout(){ this.$http.post('/users/logout').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }, getGoods(){ this.$http.post('/goods/list').then(result=>{ let res = result.data; this.nickName = ''; console.log(res); }) }
看完上述內(nèi)容,你們掌握利用vue怎么解決跨域問題的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
文章名稱:利用vue怎么解決跨域問題
分享網(wǎng)址:http://jinyejixie.com/article8/ggipop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、虛擬主機(jī)、App設(shè)計(jì)、域名注冊、外貿(mào)建站、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)