vue解決跨域路由沖突問題思路解析
vue 簡(jiǎn)介
Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層, 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡(jiǎn)單,本教程基于 Vue 2.1.8 版本測(cè)試。
當(dāng)我們?cè)诼酚衫锩媾渲贸梢韵麓砜梢越鉀Q跨域問題
proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*': { target: 'http://localhost:3000' } },
這種配置方式在一定程度上解決了跨域問題,但是會(huì)帶來一些問題,
比如我們的vue 路由 也命名為 goods,這時(shí)候就會(huì)產(chǎn)生了沖突,
如果項(xiàng)目中接口很多,都在這里配置是很麻煩的,也容易產(chǎn)生路由沖突。
正確的姿勢(shì)
如果把所有的接口,統(tǒng)一規(guī)范為一個(gè)入口,在一定程度上會(huì)解決沖突
把以上配置統(tǒng)一前面加上 /api/
proxyTable: { '/api/**': { target: 'http://localhost:3000' }, },
如果我們配置成這種方式,在使用http請(qǐng)求的時(shí)候就會(huì)發(fā)生變化,會(huì)在請(qǐng)求前面加上一個(gè)api,相對(duì)路由也會(huì)發(fā)生變化,也會(huì)在接口前面加上api,這樣也會(huì)很麻煩,我們可以使用以下方式來解決這個(gè)問題
proxyTable: { '/api/**': { target: 'http://localhost:3000', pathRewrite:{ '^/api':'/' } }, },
上面這個(gè)代碼,就是把咱們虛擬的這個(gè)api接口,去掉,此時(shí)真正去后端請(qǐng)求的時(shí)候,不會(huì)加上api這個(gè)前綴了,那么這樣我們前臺(tái)http請(qǐng)求的時(shí)候,還必須加上api前綴才能匹配到這個(gè)代理,代碼如下:
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,這樣我們每次訪問的時(shí)候,自動(dòng)補(bǔ)上這個(gè)api前綴,就不需要我們自己手工在每個(gè)接口上面寫這個(gè)前綴了
在入口文件里面配置如下:
import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Axios.defaults.baseURL = 'api'
如果這配置 ‘a(chǎn)pi/' 會(huì)默認(rèn)讀取本地的域
上面這樣配置的話,不會(huì)區(qū)分生產(chǎn)和開發(fā)環(huán)境
在config 文件夾里面新建一個(gè) api.config.js 配置文件
const isPro = Object.is(process.env.NODE_ENV, 'production') module.exports = { baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/' }
然后在main.js 里面引入,這樣可以保證動(dòng)態(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 文件夾里面新建一個(gè) 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里面請(qǐng)求api的姿勢(shì)
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); }) }
PS:下面通過一段代碼學(xué)習(xí)下vue下跨域設(shè)置
1、在使用vue開發(fā)的時(shí)候經(jīng)常要涉及到跨域的問題,其實(shí)在vue cli中是有我們?cè)O(shè)置跨域請(qǐng)求的文件的。
2、當(dāng)跨域無法請(qǐng)求的時(shí)候我們可以修改工程下config文件夾下的index.js中的dev:{}部分。
dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: false, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://api.douban.com/v2', changeOrigin: true, pathRewrite: { '^/api': '' } } }, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false }
將target設(shè)置為我們需要訪問的域名。
3、然后在main.js中設(shè)置全局屬性:
Vue.prototype.HOST = '/api'
4、至此,我們就可以在全局使用這個(gè)域名了,如下:
var url = this.HOST + '/movie/in_theaters' this.$http.get(url).then(res => { this.movieList = res.data.subjects; },res => { console.info('調(diào)用失敗'); });
總結(jié)
以上所述是小編給大家介紹的vue解決跨域路由沖突問題思路解析,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- 基于vue-resource jsonp跨域問題的解決方法
- vue.js使用代理和使用Nginx來解決跨域的問題
- vue-cli開發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
- vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問題解決方法
- 基于VUE移動(dòng)音樂WEBAPP跨域請(qǐng)求失敗的解決方法
- Nginx 解決WebApi跨域二次請(qǐng)求以及Vue單頁面的問題
- vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請(qǐng)求的方法
- vue+Java后端進(jìn)行調(diào)試時(shí)解決跨域問題的方式
- vue使用axios跨域請(qǐng)求數(shù)據(jù)問題詳解
- vue跨域解決方法
- vue幾個(gè)常用跨域處理方式介紹
相關(guān)文章
Vue3 響應(yīng)式 API 及 reactive 和 ref&
響應(yīng)式是一種允許以聲明式的方式去適應(yīng)變化的編程范例,這篇文章主要介紹了關(guān)于Vue3響應(yīng)式API及reactive和ref的用法,需要的朋友可以參考下2023-06-06antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能
這篇文章主要介紹了antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-01vue2封裝webSocket的實(shí)現(xiàn)(開箱即用)
在Vue2中,可以使用WebSocket實(shí)時(shí)通信,本文主要介紹了vue2封裝webSocket的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例
在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制
這篇文章主要為大家詳細(xì)介紹了使用Element+vue實(shí)現(xiàn)開始與結(jié)束時(shí)間限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08詳解關(guān)于vue-area-linkage走過的坑
這篇文章主要介紹了詳解關(guān)于vue-area-linkage走過的坑,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項(xiàng)目越來越復(fù)雜就會(huì)出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10