關於vue解決跨域路由衝突問題
- 小云云原創
- 2017-12-28 10:35:251628瀏覽
Vue.js（發音 /vjuː/, 類似 view） 是一套建構使用者介面的漸進式框架。本文給大家詳細介紹了vue解決跨域路由衝突問題思路解析，需要的朋友參考下吧，希望能幫助大家。
vue 簡介
Vue.js（發音 /vjuː/, 類似 view） 是一套建構使用者介面的漸進式框架。
Vue 只關注視圖層， 採用自底向上增量開發的設計。
Vue 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。
Vue 學習起來非常簡單，本教學基於 Vue 2.1.8 版本測試。
當我們在路由裡面配置成以下代理可以解決跨域問題
proxyTable: {
'/goods/*': {
target: 'http://localhost:3000'
},
'/users/*': {
target: 'http://localhost:3000'
}
},
這種配置方式在一定程度上解決了跨域問題，但是會帶來一些問題，
例如我們的vue 路由也命名為goods，這時候就會產生了衝突，
如果專案中介面很多，都在這裡配置是很麻煩的，也容易產生路由衝突。
正確的姿勢
如果把所有的接口，統一規範為一個入口，在一定程度上會解決衝突
把以上配置統一前面加上/api/
proxyTable: {
'/api/**': {
target: 'http://localhost:3000'
},
},
如果我們配置成這種方式,在使用http請求的時候就會發生變化，會在請求前面加上一個api，相對路由也會發生變化，也會在介面前面加上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直接預設值是api，這樣我們每次造訪的時候，自動補上這個api前綴，就不需要我們自己手工在每個介面上面寫這個前綴了
在入口檔案裡面配置如下：
import Axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, Axios) Axios.defaults.baseURL = 'api'
如果這配置'api/' 會預設讀取本地的域
上面這樣配置的話，不會區分生產和開發環境
在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 裡面引入,這樣可以保證動態的匹配生產和開發的定義前綴
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裡面可以這樣輕鬆的訪問,也不需要在任何組件裡面引入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/'
}
關於生產和開發設定不太了解
可以去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:下面透過一段程式碼學習下vue下跨域設定
#1、在使用vue開發的時候常常要牽涉到跨域的問題，其實在vue cli中是有我們設定跨域請求的檔案的。
2、當跨域無法請求的時候我們可以修改工程下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設定為我們需要存取的網域。
3、然後在main.js中設定全域屬性：
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('调用失败');
});
相關推薦：
#jquery中ajax跨域提交時出現2次請求的問題解決方案
#以上是關於vue解決跨域路由衝突問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！