vue跨域proxy代理配置詳解
引言
相信很多人都用過proxy,這里就不多說proxy的基本使用,這里要說一下很多人使用proxy的一個(gè)誤區(qū),大家一般都是直接將管官方的例子拿過來,修改一下代理目標(biāo)直接就是用了,但是代理的路徑匹配你真的會(huì)用么?
如果你能夠認(rèn)證看完那么我保證你下次再配置代理的時(shí)候就能一步就能完成,無需多次npm run serve
先來一個(gè)正則熱熱身待會(huì)需要用,看懂了再往下看:
例一
這是我使用express自己搭建的一個(gè)超級(jí)簡(jiǎn)單的服務(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>
很簡(jiǎn)單的幾行代碼,那么此時(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)榭眨溆嗟亩急A粝聛?,因此第一個(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é)果就變成了上面的樣子。
總結(jié)
圈一和圈二的地方都是正則表達(dá)式,再配置proxy的時(shí)候一定要看清楚有沒有加^
符號(hào)或者^
符號(hào)有沒有加錯(cuò),或者是不是寫成了正則表達(dá)式里面的其他符號(hào)
到此這篇關(guān)于vue跨域proxy代理配置詳解的文章就介紹到這了,更多相關(guān)vue proxy內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作
VUE前端從后臺(tái)請(qǐng)求過來的數(shù)據(jù)進(jìn)行轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11學(xué)習(xí)vue.js中class與style綁定
這篇文章主要和大家一起學(xué)習(xí)vue.js中class與style綁定操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題
這篇文章主要介紹了解決vue使用vant下拉框van-dropdown-item 綁定title值不變問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08Vue入門之?dāng)?shù)據(jù)綁定(小結(jié))
本篇文章主要介紹了探索Vue高階組件的使用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01VUE項(xiàng)目啟動(dòng)沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注
這篇文章主要給大家介紹了關(guān)于VUE項(xiàng)目啟動(dòng)沒有問題但代碼中script標(biāo)簽有藍(lán)色波浪線標(biāo)注的相關(guān)資料,文中將遇到的問題以及解決的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05vue-cli打包后本地運(yùn)行dist文件中的index.html操作
這篇文章主要介紹了vue-cli打包后本地運(yùn)行dist文件中的index.html操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08