vue跨域proxy代理配置詳解

更新時(shí)間：2022年08月22日 14:56:47 作者：白嫖leader

今天被vue中proxy配置困擾了一天,記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue配置文件中的proxy配置方式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

引言

相信很多人都用過proxy，這里就不多說proxy的基本使用，這里要說一下很多人使用proxy的一個(gè)誤區(qū)，大家一般都是直接將管官方的例子拿過來，修改一下代理目標(biāo)直接就是用了，但是代理的路徑匹配你真的會(huì)用么？

如果你能夠認(rèn)證看完那么我保證你下次再配置代理的時(shí)候就能一步就能完成，無需多次npm run serve

先來一個(gè)正則熱熱身待會(huì)需要用，看懂了再往下看：

例一

這是我使用express自己搭建的一個(gè)超級(jí)簡單的服務(wù)器，代碼如下(沒有設(shè)置允許跨域請(qǐng)求)

// 引入 express 框架
const express = require("express")
// 創(chuàng)建網(wǎng)站服務(wù)器
const app = express()
app.get("/list", (req, res) => {
  // 向客戶端直接響應(yīng)一個(gè)對(duì)象
  res.send({ name: "張三", age: 333 })
})
app.get("/aa/api/list", (req, res) => {
  // 向客戶端直接響應(yīng)一個(gè)對(duì)象
  res.send({ name: "李四", age: 666 })
})
app.get("/aa/list", (req, res) => {
  // 向客戶端直接響應(yīng)一個(gè)對(duì)象
  res.send({ name: "王五", age: 888 })
})
// 監(jiān)聽端口
app.listen(3000)
console.log("網(wǎng)站服務(wù)器啟動(dòng)成功")

下面是我的vue.config.js的配置信息

const path = require("path")
module.exports = {
  devServer: {
    // open: true, //打開瀏覽器
    overlay: {
      //當(dāng)出現(xiàn)編譯錯(cuò)誤或警告時(shí)，在瀏覽器中顯示全屏覆蓋。
      warnings: false, //不顯示警告
      errors: true, //顯示錯(cuò)誤
    },
    proxy: {
      //下面的key是一個(gè)正則表達(dá)式它的/api前加上^和不加^符號(hào)差別非常大
      "/api": {
        target: "http://localhost:3000",
        pathRewrite: {
          //下面的key是一個(gè)正則表達(dá)式它的/api前加上^和不加^符號(hào)差別非常大
          "^/api": "",
        },
      },
    },
  },
  runtimeCompiler: true,
  lintOnSave: false,
  configureWebpack: {
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
  },
}

大家只需要關(guān)注下面的一部分就可以了，其他的對(duì)這次講解沒有影響：

發(fā)送請(qǐng)求的代碼如下：

<template>
  <div>
    <!-- 測(cè)試跨域，這個(gè)測(cè)試的非常好 -->
    <el-button @click="send1" type="success">點(diǎn)我發(fā)送請(qǐng)求1</el-button>
    <el-button @click="send2" type="success">點(diǎn)我發(fā)送請(qǐng)求2</el-button>
  </div>
</template>
<script>
import { axiosImpl } from "@/utils/request"
export default {
  methods: {
    async send1() {
      let res = await axiosImpl.get("/aa/api/list")
      console.log(res)
    },
    async send2() {
      let res = await axiosImpl.get("/api/list")
      console.log(res)
    },
  },
}
</script>
<style></style>

很簡單的幾行代碼，那么此時(shí)點(diǎn)擊兩個(gè)按鈕會(huì)分別輸入什么呢？

看結(jié)果：

也許想的和你不太一樣，那么這就是我們要說的重點(diǎn)了，在圈1和圈2圈起來的地方，是一個(gè)正則表達(dá)式

由于此時(shí)圈1沒有加^符號(hào)，那么所有帶有/api的請(qǐng)求都會(huì)進(jìn)來，然后進(jìn)行代理，在進(jìn)行pathRewrite的時(shí)候，由于加上了^符號(hào)，那么就只會(huì)匹配以/api開頭的路徑，把以/api開頭的這一個(gè)/符號(hào)和三個(gè)字母變?yōu)榭眨溆嗟亩急Ａ粝聛?，因此第一個(gè)請(qǐng)求到服務(wù)器就變成了/aa/api/list，第二個(gè)就變成了/list，因此結(jié)果就變成了上面的樣子。

例二

如果將vue.config.js的值改成下面的這個(gè)樣子，其余的不變，結(jié)果又會(huì)是什么呢？

結(jié)果如下：

原理和上面的一樣

由于此時(shí)圈1加上了^符號(hào)，那么所有以/api開頭的請(qǐng)求都會(huì)進(jìn)來，然后進(jìn)行代理，在代理的時(shí)候，由于沒有上了^符號(hào)，那么就會(huì)吧路徑中所有的/api都變成空，對(duì)于請(qǐng)求二到最后到服務(wù)器就只剩下了一個(gè)/list，因此結(jié)果就變成了上面的樣子。