vue的代理配置pathRewrite重寫不生效怎么解決

本篇內容介紹了“vue的代理配置pathRewrite重寫不生效怎么解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

代理配置pathRewrite重寫不生效

本人遇到的情況在網上搜索時沒有看到本人遇到的情況。

    devServer: {
        proxy: {
            //代理匹配前綴2
            '/api2': {
                target: 'http://localhost:5001',
                pathRewrite: {'^/api2': ''},
                ws: true,
                changeOrigin: true
            },
            //代理匹配前綴1
            '/api': {
                target: 'http://localhost:5000',
                pathRewrite: {'^/api': ''},
                ws: true,)
                changeOrigin: true
            }
        }
    }

開始時配置了/api前綴的代理，沒有問題，然后又配置了/api2前綴的配置代理，然后就無法訪問/api2前綴的代理了。

原因：就是因為/api在前面，先匹配了/api，例如訪問/api2/test，由于先匹配了/api所以重寫/api為空字符串后，路徑變為了2/test，自然就不對了

解決：把/api2放在/api前面，讓api2先匹配到，或者取名叫/api2，讓其無法先匹配到/api

webpack代理---pathRewrite

今天遇到個問題，前提是項目是我本地有一份后端，端口號不同，前臺4000，后端3100，請求方式4000代理到3100

代理到本地

接口請求方式如下

http://localhost:4000/api/scoringrules/all   //每個請求后面都有/api

配置：

"proxy": {
    "/api": {
      "target": "http://localhost:3100",
      "changeOrigin": true,
      "pathRewrite": {     // 如果接口本身沒有/api需要通過pathRewrite來重寫了地址,這里把/api轉成‘ '
        "^/api": ""
      }
    }
  },

pathRewrite：重寫路徑

后端識別時候把/api替換成空，后端沒有/api

/api只是作為區分路由和接口的方式

具體要不要配置pathRewrite,要看前端的請求方式，以及后臺的接受方式

ps：

比如：我在配置本地的時候

前端請求的參數的時候有/api，來區分網頁還接口，但是后臺接受的沒有,則需要如上配置

但是：我在配置都域名的時候，域名接口地址是帶/api的，所以此時無需配置pathRewrite 

“vue的代理配置pathRewrite重寫不生效怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！