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

關于axios的proxy代理配置解析

 更新時間：2023年07月04日 09:11:27   作者：啊啊怪  
這篇文章主要介紹了關于axios的proxy代理配置解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

axios的proxy代理配置解析

proxy實際上是一種前端開發(fā)中方便開發(fā)用的東西，它在本地可以跨域訪問其他的網(wǎng)站，但是當頁面打包之后，proxy就會失效

我是在vue.config.js中設置proxy的，代碼如下

    proxy: {
      //匹配到的路徑
      "/api": {
        target: "XXXXXXXXX", //目標主機地址
        changeOrigin: true,//是否啟動代理
        pathRewrite: {	//重寫路徑
          "^/api": ''	//如果遇到前綴為'/api'的url，將它重寫為''
        }
      }
    }

舉個例子

proxy的target設置成http://www.web-jshtml.cn/aaa

如果你想訪問http://192.168.1.114:8080/api/，這時候，你碰到了/api，你需要將/api前邊的域名轉(zhuǎn)換為target的地址，即

  • 將http://192.168.1.114:8080轉(zhuǎn)換為http://www.web-jshtml.cn/aaa

即是http://www.web-jshtml.cn/aaa/api/這個地址，但是因為proxy的pathRewrite里需要將'/api'轉(zhuǎn)換為空字符串，所以最終的訪問地址是

  • http://www.web-jshtml.cn/aaa

直接上文檔，文檔里有詳細資料

在這里插入圖片描述

在這里插入圖片描述

axios proxy代理不成功

失敗嘗試

1、createProxyMiddleware進行setupProxy配置，但是由于之前通過craco注入webpack進行l(wèi)ess配置，可能底層加了別的配置，導致setupProxy有沖突。

2、于是嘗試通過craco進行webpack配置注入，跨域配置仍然無效。

解決辦法

通過axios發(fā)請求到代理服務器（本機），再通過本機發(fā)送到package.json中設置的proxy遠程服務器上。等于這份代碼是瀏覽器用，js控制，通過本機發(fā)請求

import axios from 'axios';
const axiosInstance = axios.create({
? ? baseURL:'/', // 創(chuàng)建本機代理服務器， 之后通過本機發(fā)送請求
? ? timeout: 1000*60*12 // 設置超時時間
})
// package.json
proxy: http://xxxxxxx //遠程服務器地址

總結

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

相關文章

  • vue之bus總線簡單使用講解

    vue之bus總線簡單使用講解

    這篇文章主要介紹了vue之bus總線簡單使用講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • 淺談Vue知識系列-axios

    淺談Vue知識系列-axios

    這篇文章主要介紹了淺談Vue知識系列-axios，本文章內(nèi)容詳細，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>
    2023-01-01
  • Vue.js項目在apache服務器部署問題解決

    Vue.js項目在apache服務器部署問題解決

    本文主要介紹了Vue.js項目在apache服務器部署問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-06-06
  • 解決Vue-Router升級導致的Uncaught (in promise)問題

    解決Vue-Router升級導致的Uncaught (in promise)問題

    這篇文章主要介紹了解決Vue-Router升級導致的Uncaught (in promise)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue項目開啟Gzip壓縮和性能優(yōu)化操作

    vue項目開啟Gzip壓縮和性能優(yōu)化操作

    這篇文章主要介紹了vue項目開啟Gzip壓縮和性能優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)

    Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)

    日常業(yè)務開發(fā)中，form表單校驗是一個很常見的問題，本文主要介紹了Element通過v-for循環(huán)渲染的form表單校驗的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-04-04
  • vue中關于trigger的用法

    vue中關于trigger的用法

    這篇文章主要介紹了vue中關于trigger的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題

    vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題

    這篇文章主要介紹了vue后端傳文件流轉(zhuǎn)化成blob對象,前端點擊下載返回undefined問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • Vue前端vue.config.js簡介

    Vue前端vue.config.js簡介

    vue.config.js?是一個可選的配置文件，如果項目的?(和?package.json?同級的)?根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載，本文重點介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧
    2023-01-01
  • vue router學習之動態(tài)路由和嵌套路由詳解

    vue router學習之動態(tài)路由和嵌套路由詳解

    本篇文章主要介紹了vue router 動態(tài)路由和嵌套路由，詳細的介紹了動態(tài)路由和嵌套路由的使用方法，有興趣的可以了解一下
    2017-09-09

最新評論