vue解決跨域路由沖突問(wèn)題思路解析

2019-11-19 15:00:07

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

vue 簡(jiǎn)介

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。

Vue 只關(guān)注視圖層，采用自底向上增量開發(fā)的設(shè)計(jì)。

Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue 學(xué)習(xí)起來(lái)非常簡(jiǎn)單，本教程基于 Vue 2.1.8 版本測(cè)試。

當(dāng)我們?cè)诼酚衫锩媾渲贸梢韵麓砜梢越鉀Q跨域問(wèn)題

proxyTable: {   '/goods/*': {    target: 'http://localhost:3000'   },   '/users/*': {    target: 'http://localhost:3000'   }  },

這種配置方式在一定程度上解決了跨域問(wèn)題，但是會(huì)帶來(lái)一些問(wèn)題，

比如我們的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ì)很麻煩,我們可以使用以下方式來(lái)解決這個(gè)問(wèn)題

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，這樣我們每次訪問(wèn)的時(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)過(guò)上面配置后，在dom里面可以這樣輕松的訪問(wèn),也不需要在任何組件里面引入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:下面通過(guò)一段代碼學(xué)習(xí)下vue下跨域設(shè)置

1、在使用vue開發(fā)的時(shí)候經(jīng)常要涉及到跨域的問(wèn)題，其實(shí)在vue cli中是有我們?cè)O(shè)置跨域請(qǐng)求的文件的。

2、當(dāng)跨域無(wú)法請(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è)置為我們需要訪問(wèn)的域名。

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解決跨域路由沖突問(wèn)題思路解析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！

上一篇：AngularJS中controller控制器繼承的使用方法

下一篇：React-intl 實(shí)現(xiàn)多語(yǔ)言的示例代碼