我們在使用 vue-cli 工具生成 vue 項(xiàng)目時

vue init webpack my-project-vue

在生成的項(xiàng)目結(jié)構(gòu)里,會有一個 index.js 文件.

image.png

在這個 index.js 文件里,會有一個 proxyTable 的空節(jié)點(diǎn).

image.png

理解這個節(jié)點(diǎn)的作用需要有兩個前置知識

• 前端跨域
• 利用代理服務(wù)器進(jìn)行跨域.

關(guān)于這個問題,我在上一篇[CORS & JSONP 學(xué)習(xí)筆記一]文章中已經(jīng)有了大致的說明.

如果忘記了,可以回頭去看看復(fù)習(xí)一下.

proxyTable

proxyTable 是 vue-cli 腳手架在開發(fā)模式下,為我們提供的一個跨域的代理中轉(zhuǎn)服務(wù)器服務(wù).基于 (http-proxy-middleware插件).

為什么要有 proxyTable?

有時候在開發(fā)期間,我們請求的后臺接口(a.b.c/data.json)不和vue(localhost:8080)在同一個域名,后臺也并未提供cors跨域服務(wù).

image.png

正常情況下,我們無法通過ajax向后臺請求到數(shù)據(jù).因?yàn)榭缬蛄?瀏覽器的同源策略,截獲了這次數(shù)據(jù)的返回,沒有給vue.

解決辦法有兩個:

• 服務(wù)器開啟 cors (最簡單,也是最方便的)
• 用代理服務(wù)器中轉(zhuǎn)一下(vue請求的還是自己的后臺,讓后臺去請求真是數(shù)據(jù)的后臺,然后再將數(shù)據(jù)返回給vue)

訪問一個不支持跨域的后臺服務(wù)數(shù)據(jù)接口

這里,用node.js寫一個非常簡單http服務(wù)..端口號是54321.

這個服務(wù)就是返回一個json數(shù)據(jù).

但并沒有開啟跨域功能.

const http = require('http')
const fs = require('fs')

http.createServer((request, response) => { 
  console.log(request.url) 
  // 對于所有請求,都返回這個json數(shù)據(jù).
  fs.readFile('./json.data.json', 'utf-8', (err, data) => { 
    response.end(data)
  })
}).listen(54321, () => { 
  console.log(`server is running at 54321`)
})

測試一下:

image.png

然后使用 vue-cli 創(chuàng)建一個 vue 項(xiàng)目

并在 App.vue 里鍵入以下代碼

created() {
      this.axios.get('http://localhost:54321/json.data.json')
          .then(response => {
            this.users = response.data.todoList
            console.log(this.users.todoList)
          })
          .catch(error => {
            console.log(error)
          })
    },  

不出意外,肯定會提示跨域了.(vue:8080) & (json.data:54321)

image.png

假設(shè)現(xiàn)在這個后臺是別人寫的,或者是一個壓根你就不認(rèn)識的人或公司寫的.你無法讓他們?nèi)ズ笈_追加 cors 來進(jìn)行跨域支持.

那就只剩下另外一個辦法了.

配置 proxyTable

配置 proxyTable 來進(jìn)行跨域

proxyTable 跨域的基本原理是:

在開發(fā)模式下,webpack 會為我們提供一個http代理服務(wù)器.
我們請求接口的時候,實(shí)際上是請求的webpack提供的這個http代理服務(wù)器.
在由這個代理服務(wù)器請求真是的數(shù)據(jù)服務(wù)器.
最后數(shù)據(jù)經(jīng)由webpack代理服務(wù)器,最后轉(zhuǎn)交給我們的vue程序.

image.png

為什么加個代理服務(wù)器就可以了?

因?yàn)榇矸?wù)器不是瀏覽器,它沒有同源策略的限制.

在了解到了基本原理之后,就可以看看 proxyTable 這個節(jié)點(diǎn)的一些配置屬性了.

proxyTable: {
      // 這里配置 '/api' 就等價于 target , 你在鏈接里訪問 /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321/', // 真是服務(wù)器的接口地址 // http://localhost:54321/json.data.json,
        secure: true, // 如果是 https ,需要開啟這個選項(xiàng)
        changeOrigin: true, // 是否是跨域請求?肯定是啊,不跨域就沒有必要配置這個proxyTable了.
        pathRewrite: {
          // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置.

          '/^api': 'api/', 
          // 等價于 
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
        }
      }
     },

關(guān)于 pathRewrite 節(jié)點(diǎn)說明:

首先，在ProxyTable模塊中設(shè)置了‘/api’，target中設(shè)置服務(wù)器地址，也就是接口的開頭那段地址，例如http://localhost:54321/，然后我們在調(diào)用接口的時候，就可以全局使用/api，這時候/api的作用就相當(dāng)于http://localhost:54321/，比如接口的地址是http://localhost:54321/api/json.data，我們就可以使用/api/json.data

那pathRewrite是用來干嘛的呢，這里的作用，相當(dāng)于是替代/api，如果接口中是沒有api的，那就直接置空，如果接口中有api，那就得寫成{^/api:/api}，可以理解為一個重定向或者重新賦值的功能。

總結(jié):

• proxyTable 就是webpack在開發(fā)環(huán)境給我們提供的一個代理服務(wù)器,(使用的是 http-proxy-middleware)
• 目的是為了在服務(wù)器不方便開啟跨域功能的時候,我們也能方便的在開發(fā)階段發(fā)送ajax跨域請求.
• 當(dāng)了真實(shí)發(fā)布環(huán)境,這個玩意就不起作用了.除非自己配置一個代理服務(wù)器,或者讓后臺開啟 cors

[碼云code]