vue 前端服務器代理，proxyTable簡要敘述

以下是我轉載的文章，大概看了下對於服務器代理講的很全面很適合大眾朋友們，易懂。

博主文章鏈接：https://www.jianshu.com/p/a2e3147c2af2

我們在使用 vue-cli 工具生成 vue 項目時

vue init webpack my-project-vue 

在生成的項目結構里,會有一個 index.js 文件.

 

image.png

在這個 index.js 文件里,會有一個 proxyTable 的空節點.

 

image.png

理解這個節點的作用需要有兩個前置知識

• 前端跨域
• 利用代理服務器進行跨域.

---

proxyTable

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

為什么要有 proxyTable?

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

 

image.png

正常情況下,我們無法通過ajax向后台請求到數據.因為跨域了.瀏覽器的同源策略,截獲了這次數據的返回,沒有給vue.

解決辦法有兩個:

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

---

訪問一個不支持跨域的后台服務數據接口

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

這個服務就是返回一個json數據.

但並沒有開啟跨域功能.

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

測試一下:

 

 

然后使用 vue-cli 創建一個 vue 項目

並在 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)

 

 

假設現在這個后台是別人寫的,或者是一個壓根你就不認識的人或公司寫的.你無法讓他們去后台追加 cors 來進行跨域支持.

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

配置 proxyTable

配置 proxyTable 來進行跨域

proxyTable 跨域的基本原理是:

在開發模式下,webpack 會為我們提供一個http代理服務器.
我們請求接口的時候,實際上是請求的webpack提供的這個http代理服務器.
在由這個代理服務器請求真是的數據服務器.
最后數據經由webpack代理服務器,最后轉交給我們的vue程序.

 

 

為什么加個代理服務器就可以了?

因為代理服務器不是瀏覽器,它沒有同源策略的限制.

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

proxyTable: {
      // 這里配置 '/api' 就等價於 target , 你在鏈接里訪問 /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321', 
        // secure: true, // 如果是 https ,需要開啟這個選項
        changeOrigin: true, // 是否是跨域請求?肯定是啊,不跨域就沒有必要配置這個proxyTable了.
        pathRewrite: {
          // 這里是追加鏈接,比如真是接口里包含了 /api,就需要這樣配置.
　　　　　　'^/api': '/api', // 和下邊兩種寫法，因人而異根據需求。
　　　　　　// 等價於    /api + /api  ==  http://localhost:54321/api
　　　　　　// 如果寫為 '^/api' : '/'
　　　　　　// 等價於   /api + /  ==  http://localhost:54321/
　　　　　　// 這里的 /api ==  http://localhost:54321
 　　　　} 
　　}
 }, 

　　

關於 pathRewrite 節點說明:

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

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

總結:

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