快捷導(dǎo)航

Vue 調(diào)試訪問本地后端接口配置

更新時間：2023年06月09日 14:48:41 作者：枸杞泡茶呀

記錄一下本地測試前端的時候怎么訪問本地后端接口,文中給大家提到了vue如何做調(diào)試后臺接口的配置和proxy的工作原理以及為什么能解決跨域，感興趣的朋友跟隨小編一起看看吧

Vue 調(diào)試訪問本地后端接口配置

記錄一下本地測試前端的時候怎么訪問本地后端接口。時間太長容易忘。。。。

1、首先要知道前端在訪問后端的時候是怎么加上后端接口地址的。

如下圖，找到封裝http請求的文件，src/utils/rerquest.js
該圖中的baseURL就是訪問時我們加上的后端請求地址。
baseURL: process.env.VUE_APP_BASE_API 表示baseURL使用的是環(huán)境變量中的VUE_APP_BASE_API這個參數(shù)

在本地測試前端的時候使用的命令一般都是npm run dev
然后dev使用的默認(rèn)環(huán)境變量文件是 .env.development
簡單來說，只要在.env.development中配置了VUE_APP_BASE_API參數(shù)，那么在本地測試的時候默認(rèn)使用的后端地址就是在這個文件中配置的地址。

一篇看懂 vue 如何做調(diào)試后臺接口的配置和 proxy 的工作原理以及為什么能解決跨域

之前也做過不少vue項目了，每次跟后臺配合的時候，有些配置總是會忘記，感覺每次的解決方案和上一次的都不一樣，所以這次準(zhǔn)備詳細(xì)的記錄一下，如何做配置，以及一些配置的含義

話不多說直接開始

1.首先要想調(diào)取后臺接口一定要引入的就是axios，所以第一步就是下載 axios

npm install axios

2.在需要調(diào)用接口的頁面引入axios

import axios from 'axios'

2.1發(fā)送請求

axios({
        method: "post",
        url: "接口地址",
        data: this.data,
        headers: { "Content-Type": "multipart/form-data" },
      }).then(e => {
        console.log(e)
      })

此時不出意外控制臺應(yīng)該是報錯了，應(yīng)該是報的跨域的錯，此時就要做一下對vue.config.js 文件的配置

2.2 vue.config.js
為什么要配置這么文件呢，配置這個文件的目的是什么呢？
因為我們知道瀏覽器和服務(wù)器之間會存在跨域問題，但是兩個服務(wù)器之間確實可以隨意訪問的，所以我們要配置一個代理服務(wù)器來調(diào)用用服務(wù)器的接口，如果你的前端應(yīng)用和后端 API 服務(wù)器沒有運行在同一個主機上，你需要在開發(fā)環(huán)境下將 API 請求代理到 API 服務(wù)器，此時可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

devServer: {
    port: '9080',
    open: true,
    proxy: {
      '/api': {
        target: 'http://192.168.2.108:9080/crm',//代理地址，這里設(shè)置的地址會代替axios中設(shè)置的baseURL
        secure: false, //如果是https接口需要進(jìn)行此配置 
        changeOrigin: true,// 如果接口跨域，需要進(jìn)行這個參數(shù)配置
        //pathRewrite方法重寫url
        pathRewrite: {
          '^/api': '/aaa' //如果沒有pathRewrite屬性 調(diào)用的接口就是http://cloud/api/xxx/xxxx 如果有 pathRewrite屬性 調(diào)用的接口就是 http://cloud/aaa/xxx/xxxx
         }
        }
      }
    },
  },

devServer里面proxy則是關(guān)于代理的配置，該屬性為對象的形式，對象中每一個屬性就是一個代理的規(guī)則匹配

屬性的名稱是需要被代理的請求路徑前綴，一般為了辨別都會設(shè)置前綴為/api，值為對應(yīng)的代理匹配規(guī)則，對應(yīng)如下：
tip: 如果接口地址沒有一個統(tǒng)一的前綴如 /api 可以設(shè)置一個 axios.defaults.baseURL = ‘/api’ 即可為所有接口地址添加一個統(tǒng)一的前綴 /api

target：表示的是代理到的目標(biāo)地址
pathRewrite：默認(rèn)情況下，我們的 /api 也會被寫入到URL中，如果希望刪除，可以使用pathRewrite 如果你的接口中本身就帶有 /api 可以不寫 pathRewrite
secure：默認(rèn)情況下不接收轉(zhuǎn)發(fā)到https的服務(wù)器上，如果希望支持，可以設(shè)置為false
changeOrigin：它表示是否更新代理后請求的 headers 中host地址

3.工作原理

proxy實質(zhì)就是一個代理服務(wù)器這樣就能理解 proxy 工作原理實質(zhì)上是利用http-proxy-middleware 這個http代理中間件，實現(xiàn)請求轉(zhuǎn)發(fā)給其他服務(wù)器

舉個例子：

在開發(fā)階段，本地地址為http://localhost:3000，該瀏覽器發(fā)送一個前綴帶有/api標(biāo)識的請求到服務(wù)端獲取數(shù)據(jù)，但響應(yīng)這個請求的服務(wù)器只是將請求轉(zhuǎn)發(fā)到另一臺服務(wù)器中

說的再通俗一點就是 A（瀏覽器）想認(rèn)識（發(fā)請求） C（服務(wù)器）但是由于礙于面子(同源政策) 只能通過 B（proxy）來介紹，也就是 A 發(fā)送請求給 B 再由 B 轉(zhuǎn)發(fā)請求給 C

4.跨域

在開發(fā)階段，devServer 會啟動一個本地開發(fā)服務(wù)器，所以我們的應(yīng)用在開發(fā)階段是獨立運行在 localhost的一個端口上，而后端服務(wù)又是運行在另外一個地址上

所以在開發(fā)階段中，由于瀏覽器同源策略的原因，當(dāng)本地訪問后端就會出現(xiàn)跨域請求的問題

通過設(shè)置 proxy 實現(xiàn)代理請求后，相當(dāng)于瀏覽器與服務(wù)端中添加一個代理者

當(dāng)本地發(fā)送請求的時候，代理服務(wù)器響應(yīng)該請求，并將請求轉(zhuǎn)發(fā)到目標(biāo)服務(wù)器，目標(biāo)服務(wù)器響應(yīng)數(shù)據(jù)后再將數(shù)據(jù)返回給代理服務(wù)器，最終再由代理服務(wù)器將數(shù)據(jù)響應(yīng)給本地

請?zhí)砑訄D片描述