1、簡單配置

在 vue.config.js 中簡單配置代理規則

devServer: {
	proxy: 'http://localhost:5000'  // 代理目標的基礎路徑
}

優點：配置簡單，請求資源時直接發給前端即可

缺點：不能配置多個代理，不能靈活的控制請求是否走代理

注意：當請求了前端不存在的資源時，請求會轉發給伺服器（優先匹配前端資源）

2、具體配置

在 vue.config.js 中具體配置代理規則

devServer: {
        proxy: {
            '/Abc': {  // 匹配所有以 /Abc 開頭的請求路徑
            target: 'http://localhost:5000',  // 代理目標的基礎路徑
            pathRewrite: {'^/Abc': ''},
            changeOrigin: true  // 用於控制請求頭的 host 值
        },
           	'/demo': {
            target: 'http://localhost:5001',
            pathRewrite: {'^/demo': ''},
			changeOrigin: true
		},
	}
}
 

優點：可以配置多個代理，且可以靈活的控制是否走代理

缺點：配置繁瑣

注意：請求資源時必須加字首

對比二者：發現 方法二 較好，但是如果只是簡單的代理 方式一 也能夠勝任

需要注意：使用 方式一 時需要保證前端裡的資源不要與請求的後端資源重複