快捷導(dǎo)航

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

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

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

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

記錄一下本地測(cè)試前端的時(shí)候怎么訪問本地后端接口。時(shí)間太長(zhǎng)容易忘。。。。

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

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

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

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

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

話不多說直接開始

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

npm install axios

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

import axios from 'axios'

2.1發(fā)送請(qǐng)求

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

此時(shí)不出意外控制臺(tái)應(yīng)該是報(bào)錯(cuò)了，應(yīng)該是報(bào)的跨域的錯(cuò)，此時(shí)就要做一下對(duì)vue.config.js 文件的配置

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

devServer: {
    port: '9080',
    open: true,
    proxy: {
      '/api': {
        target: 'http://192.168.2.108:9080/crm',//代理地址，這里設(shè)置的地址會(huì)代替axios中設(shè)置的baseURL
        secure: false, //如果是https接口需要進(jìn)行此配置 
        changeOrigin: true,// 如果接口跨域，需要進(jìn)行這個(gè)參數(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)于代理的配置，該屬性為對(duì)象的形式，對(duì)象中每一個(gè)屬性就是一個(gè)代理的規(guī)則匹配

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

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

3.工作原理

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

舉個(gè)例子：

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

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

4.跨域

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

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

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

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

請(qǐng)?zhí)砑訄D片描述