【vuejs開發】如何在vue裏面優雅的解決跨域，路由衝突問題！超詳細

時間 2019-11-06

標籤 vuejs開發如何 vue 裏面優雅解決路由衝突問題詳細欄目系統網絡简体版

原文原文鏈接

原創文章，做者：stark，如若轉載，請註明出處：https://shudong.wang/10233.htmlhtml

如何在vue裏面優雅的解決跨域，路由衝突問題

當咱們在路由裏面配置成如下代理能夠解決跨域問題

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

這種配置方式在必定程度上解決了跨域問題，可是會帶來一些問題，
好比咱們的vue 路由也命名爲 goods，這時候就會產生了衝突，
若是項目中接口不少，都在這裏配置是很麻煩的，也容易產生路由衝突。

　正確的姿式

若是把全部的接口，統一規範爲一個入口，在必定程度上會解決衝突

把以上配置統一前面加上 /api/vue

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前綴，就不須要咱們本身手工在每一個接口上面寫這個前綴了

在入口文件裏面配置以下：webpack

import Axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

若是這配置 'api/' 會默認讀取本地的域

上面這樣配置的話，不會區分生產和開發環境

在config 文件夾裏面新建一個 api.config.js 配置文件ios

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 配置文件web

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