欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中配置后端接口服務(wù)信息詳解

 更新時間:2022年03月29日 13:37:43   作者:-檸檬不要羨慕西瓜的甜i  
這篇文章主要介紹了vue中配置后端接口服務(wù)信息詳解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue配置后端接口服務(wù)信息

最重要一點

配置完信息后,重新啟動服務(wù) npm run dev

需要在config下的index.js中 找到

module.exports = {
? dev: {?
? }
}

以此接口為例

dev: {
? ? // Paths
? ? assetsSubDirectory: 'static',
? ? assetsPublicPath: '/',
? ? proxyTable: {
? ? ? ? '/api': {
? ? ? ? ? ? target: 'http://100.1.1.1:10', ? ?//設(shè)置你調(diào)用的接口域名和端口號 別忘了加http
? ? ? ? ? ? changeOrigin: true
? ? ? ? }
? ? },
}

然后在main.js中引入axios         npm install axios -d

import axios from 'axios'
? Vue.prototype.$http = axios.create({
? timeout: 10 * 1000
})

然后在vue組件中這樣使用:

this.$http.get('/static/data/xxxxx.json')
? .then(res => {
? ? console.log(res)
? }).catch(err => {
? console.log(err)
})

vue與后端接口是如何進(jìn)行接口請求的原理

最近遇到一個很奇怪的問題

前端vue和后端java項目布在同一臺服務(wù)器(假設(shè)該服務(wù)器為180服務(wù)器),該180服務(wù)器無法通過外網(wǎng)訪問,前端通過另一臺可ping通180服務(wù)器和連接外網(wǎng)的服務(wù)器(假設(shè)為181服務(wù)器)進(jìn)行nginx外網(wǎng)映射訪問。此時,我們的設(shè)計是希望前端通過內(nèi)網(wǎng)IP直接對后端接口請求,而不是去走域名進(jìn)行請求,這樣能夠在請求時少走一次防火墻,提供接口請求速度。

但是理想很美好,但是現(xiàn)實是最后發(fā)現(xiàn),前端一直無法成功訪問到后端接口,一直請求失敗。經(jīng)過多方排查和請教大佬,終于清楚的理解了前后端分離的請求是怎么走的。

其實,在用戶在瀏覽器端進(jìn)入應(yīng)用時,他不是直接去服務(wù)器訪問前端項目,而是通過下載,把前端的項目載入到用戶的瀏覽器中,然后再通過瀏覽器下載下來的前端vue項目進(jìn)行請求后端接口的,這時候,如果后端的接口請求改成試用180服務(wù)器的ip進(jìn)行請求,那么外網(wǎng)是無法獲取到內(nèi)網(wǎng)180服務(wù)器的后端服務(wù)的,因此就導(dǎo)致請求一直失敗。

因此在前后端分離的項目中,前端在請求后端接口時,一定要通過域名進(jìn)行訪問,或者后端的服務(wù)器需要能夠被外網(wǎng)訪問到才可以進(jìn)行正常的接口訪問。

附上如下圖示

手畫請諒解

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue懸浮可拖拽懸浮按鈕的實例代碼

    vue懸浮可拖拽懸浮按鈕的實例代碼

    這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實例代碼,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-08-08
  • 在vue自定義組件中使用?v-model指令詳情

    在vue自定義組件中使用?v-model指令詳情

    這篇文章主要介紹了在vue自定義組件中使用?v-model指令詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-06-06
  • vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

    vue3使用vue-i18n的方法詳解(ts中使用$t,?vue3不用this)

    所謂的vue-i18n國際化方案就是根據(jù)它的規(guī)則自己建立一套語言字典,對于每一個字(message)都有一個統(tǒng)一的標(biāo)識符,下面這篇文章主要給大家介紹了關(guān)于vue3使用vue-i18n(ts中使用$t,?vue3不用this)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • el-form組件清除校驗提示正確方法(前端技能提升)

    el-form組件清除校驗提示正確方法(前端技能提升)

    el-form組件提供了表單驗證的功能,可以通過在el-form上綁定rules屬性,并在el-form-item上設(shè)置prop屬性來進(jìn)行校驗,這篇文章主要給大家介紹了關(guān)于el-form組件清除校驗提示正確方法(前端技能提升)的相關(guān)資料,需要的朋友可以參考下
    2023-12-12
  • Vue中實現(xiàn)權(quán)限管理詳解

    Vue中實現(xiàn)權(quán)限管理詳解

    這篇文章主要介紹了Vue中實現(xiàn)權(quán)限管理詳解,權(quán)限是對特定資源的訪問許可,所謂權(quán)限控制,也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請求的發(fā)起權(quán),請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下
    2023-08-08
  • uni-app?開發(fā)微信小程序定位功能

    uni-app?開發(fā)微信小程序定位功能

    這篇文章主要介紹了uni-app?開發(fā)微信小程序定位,通過使用onLocationChange方法持續(xù)監(jiān)聽地址,根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度,需要的朋友可以參考下
    2022-04-04
  • 教你如何優(yōu)化?Vue.js?應(yīng)用程序

    教你如何優(yōu)化?Vue.js?應(yīng)用程序

    Vue?3引入了Composition?API,這是一套新的API用于編寫組件,作為Options?API的替代,這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下
    2023-02-02
  • vue不通過路由直接獲取url中參數(shù)的方法示例

    vue不通過路由直接獲取url中參數(shù)的方法示例

    通過url傳遞參數(shù)是我們在開發(fā)中經(jīng)常用到的一種傳參方法,但通過url傳遞后改如果獲取呢?下面這篇文章主要給大家介紹了關(guān)于vue如何不通過路由直接獲取url中參數(shù)的相關(guān)資料,需要的朋友可以參考借鑒,下面來一起看看吧。
    2017-08-08
  • vue實現(xiàn)element上傳多張圖片瀏覽刪除功能

    vue實現(xiàn)element上傳多張圖片瀏覽刪除功能

    這篇文章主要介紹了vue實現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-10-10
  • 解決vue多層彈框時存在遮擋問題

    解決vue多層彈框時存在遮擋問題

    本文給大家介紹vue多層彈框時存在遮擋問題,解決思路首先想到的是找到對應(yīng)的遮擋層的css標(biāo)簽,然后修改z-index值,但是本思路只能解決首次問題,再次打開還會存在相同的問題,故該思路錯誤,下面給大家?guī)硪环N正確的思路,一起看看吧
    2022-03-03

最新評論