建站
咨詢
售后
建站咨詢
新聞中心
今天就跟大家聊聊有關(guān)vue中怎么解決跨域路由沖突問題，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
vue 簡介
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計。
Vue 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡單，本教程基于 Vue 2.1.8 版本測試。
當(dāng)我們在路由里面配置成以下代理可以解決跨域問題
proxyTable: {
'/goods/*': {
target: 'http://localhost:3000'
},
'/users/*': {
target: 'http://localhost:3000'
}
},這種配置方式在一定程度上解決了跨域問題，但是會帶來一些問題，
比如我們的vue 路由 也命名為 goods，這時候就會產(chǎn)生了沖突，
如果項目中接口很多，都在這里配置是很麻煩的，也容易產(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'
如果這配置 ‘a(chǎn)pi/' 會默認(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);
})
}PS:下面通過一段代碼學(xué)習(xí)下vue下跨域設(shè)置
1、在使用vue開發(fā)的時候經(jīng)常要涉及到跨域的問題，其實(shí)在vue cli中是有我們設(shè)置跨域請求的文件的。
2、當(dāng)跨域無法請求的時候我們可以修改工程下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、至此，我們就可以在全局使用這個域名了，如下：
var url = this.HOST + '/movie/in_theaters'
this.$http.get(url).then(res => {
this.movieList = res.data.subjects;
},res => {
console.info('調(diào)用失敗');
});看完上述內(nèi)容，你們對vue中怎么解決跨域路由沖突問題有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
分享文章：vue中怎么解決跨域路由沖突問題-創(chuàng)新互聯(lián)
網(wǎng)頁鏈接：http://fisionsoft.com.cn/article/docjhj.html
