【vue.js開發】如何在vue里面優雅的解決跨域，路由沖突問題

當我們在路由里面配置成以下代理可以解決跨域問題

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);})}

總結

以上是生活随笔為你收集整理的【vue.js开发】如何在vue里面优雅的解决跨域，路由冲突问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。