vue使用proxyTable解決跨域問題

廢話不多說,直接上主題。

當後端給我們一個固定接口ip,

//接口ip
baseUrl = 'http://www.baidu.com/baidu/'

//登錄接口
login = 'http://www.baidu.com/baidu/login'

開始設置跨域
1,如果重寫地址,重寫的地址最好是後端已給的固定地址,此處爲 ‘/baidu’

    proxyTable: {
      '/api': {
        target: 'http://www.baidu.com', //目標接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/baidu' //重寫接口,作用是用來和target進行拼接 http://www.baidu.com/baidu/
        }
      },
      cssSourceMap: false
    }

使用

//    此時  '/api' 代表的就是'http://www.baidu.com/baidu'
//			'/api/login' 代表的就是'http://www.baidu.com/baidu/login'

this.axios.post('/api/login',info)

2,如果沒有固定地址

 proxyTable: {
      '/api': {
        target: 'http://www.baidu.com', //目標接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/' //重寫接口,可以爲空'',也可以爲'/'
        }
      },
      cssSourceMap: false
    }

使用

//    此時  '/api' 代表的就是'http://www.baidu.com'
//			'/api/baidu/login' 代表的就是'http://www.baidu.com/baidu/login'

this.axios.post('/api/baidu/login',info)

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章