Vue筆記-Vue-cli 建立的項目使用服務器代理跨域詳解?

前言

寫項目,跨域永遠是個繞不開的問題,除非本身在localhost上玩.之前老是後端用cors的方式去解決這個問題.老問題,後端若是沒整,怎麼玩?寫vue項目,經常使用vue-cli工具依照webpack模板去搭一個項目結構.每一個人都知道用npm run dev 啓動項目,可是更應該知道的是咱們是依賴了webpack-dev-server代理服務器(用node.js寫的)才啓動了這個項目.沒親手設置可不表明不存在.因此纔會在vue項目中有服務器代理這種配置項.補一句:二手資料害死人.

問題描述:

使用 Vue-cli 建立的項目，(前端)開發地址是 localhost:8080，須要訪問 (後端)上的接口並非這個,例如後端地址是http://192.168.199.168:8080/ ,數據訪問是要跨域的喲!

抄來的方案:(先說說網上抄來抄去的一個手法)

1.在 config文件夾下index.js文件 的 dev 中添加配置項 proxyTable：

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
    // 咱們家的接口就不用api這種前綴,要怎樣
      '/api': {
        target: 'http://192.168.199.168:8080/',
        changeOrigin: true,
        // 爲何不能說說pathRewrite究竟是幹什麼的呢
        // 就知道要'^/api': '/'或者'^/api': '/'
        // 以及'/'和''有什麼區別
        // 哎,二手資料害死人
        pathRewrite: {
          '^/api': '/'
        }
      }
    },
複製代碼

2.使用axios插件時,發的請求

axios.get('/api/yyd-manage/department/list')
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})
複製代碼

注:

1.使用了 axios，能夠全局配置一個 baseURL，這樣就不用挨個兒修改 url 了,能夠省掉請求時的'/api',如:axios.get('/yyd-manage/department/list').

axios.defaults.baseURL = '/api'
//放在main.js文件中或者本身寫一個js插件文件,在main.js中註冊一下
複製代碼

這種手法可去你的吧,這屬於強行操做

2.其中 '/api' 爲匹配項，target 爲被請求的地址

3.由於在 ajax 的 url 中加了前綴 '/api'，而本來的接口是沒有這個前綴的 因此須要經過 pathRewrite 來重寫地址，將前綴 '/api' 轉爲 '/' 若是自己的接口地址就有 '/api' 這種通用前綴，就能夠把 pathRewrite 刪掉

上述操做全屬於無腦抄襲,也就能騙騙我這種水貨,徹底不具有實用性

解決方案:

先看後端node服務器的一段簡易代碼

/*
	express框架是nodeJS的第三方模塊 express框架其實是對http模塊的高度封裝
*/
// 至關於引入了http模塊
const express = require('express');
// 建立web服務器
const app = express();
// 當客戶端以get方式請求/的時候
app.get('/index', (req, res) => {
	// express提供給咱們的用來作響應的方法
	res.send('首頁')
})

app.get('/list', (req, res) => {
	res.send('列表頁')
})

app.get('/article', (req, res) => {
	res.send('文章頁')
})

app.post('/getUserInfo', (rep, res) => {
	res.send('用戶詳情');
})

// 監聽端口
app.listen(3000, () => {
	console.log('服務器啓動成功');
});
複製代碼

例:其中的一個接口地址爲:http://localhost:3000/index

vue-cli搭的webpack項目模板中前端設置服務器代理的代碼

//在 config文件夾下index.js文件 的 dev 中添加配置項 proxyTable
  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/index': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        // 就不寫pathRewrite
      }
    },
複製代碼

axios的get別名請求方法代碼

//隨便找個組件寫個點擊事件,發請求
  axios.get('/index')
    .then(res => {
      console.log(res);
    })
    .catch(err => {
       console.log(err); 
    })
複製代碼

返回內容(跨域成功)

並無什麼api,也沒有pathRewrite: {"^/api" : ""}照樣能使用

注:

1.proxyTable中的'/index'至關於一個標識,告訴webpack-dev-server,個人請求接口中以/index開頭的地址要使用代理.否則的話, 可能你的 html, css, js這些靜態資源都跑去代理. 因此咱們只要接口用代理, 靜態文件用本地.極端狀況下你使用'/',那麼全部的請求都會被代理,固然也能夠正常跨域.

2.使用這種服務器代理的方式跨域時,不須要再去設置axios的基地址了,會報錯. 即不用axios.get('http://localhost:3000/index')也不用axios.defaults.baseURL = 'http://localhost:3000/' 而後axios.get('/index')

3.proxyTable的配置項是webpack模板做者本身定義的,實際上真正生效的是webpack的devServer.proxy配置項,在build文件夾下webpack.dev.conf.js能夠看到proxy: config.dev.proxyTable,靠這行代碼實現的真正配置.iview-admin模板的vue.config.js中正是直接使用devServer.proxy而不是proxyTable,才讓我在兩個項目模板上困惑不已.

參考文章:vue-cli的webpack相關內容

參考文章:webpack的DevServer

4.pathRewrite的做用:

pathRewrite至關於一個重定向或者叫重寫請求路徑的做用,固然也能夠移除,添加.

這是隸屬於插件http-proxy-middleware的東西,該插件功能強大,還有路由等功能.

參考內容:http-proxy-middleware

上一段配置代碼(修改配置項要注意重啓項目)

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/index': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        pathRewrite: {
            // 符號^是正則表達式符號,是匹配輸入字符串的開始位置
            '^/index': '/list'
        }
      }
    },
複製代碼

原本咱們要請求http://localhost:3000/index的接口如今就成了請求http://localhost:3000/list

axios的get別名請求方法代碼

//隨便找個組件寫個點擊事件,發請求
  axios.get('/index')
    .then(res => {
      console.log(res);
    })
    .catch(err => {
       console.log(err); 
    })
複製代碼

返回結果(是接口/list的結果,而不是/index的)

項目中的配置文件仍是應當好好研究一下,不只僅是跨域問題,還有開發模式,測試模式,生產模式,process.env等環境變量,路還很遠.明年就要正式更新vue3.0了,變化真快.

推薦文章:vue-cli腳手架build目錄中的webpack.dev.conf.js配置文件