Vue 脚手架配置代理
一、方法一（只能代理一个服务器的情况）
1. 配置
在 vue.config.js 中添加如下：
devServer: { proxy: 'http://localhost:5000' }
2. 说明
- 优点：配置简单，请求资源时直接发给前端（8080）即可。
- 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
- 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）。
3. 实例
- 准备好 server1.js 服务器文件，当前文件夹下通过在 cmd 中键入 node server1 启动服务器，并在浏览器中打开。
- vue.config.js 中配置
module.exports = { pages: { index: { // 入口 entry: 'src/main.js', }, }, lintOnSave: false, //关闭语法检查 // 开启代理服务器 (方式一) devServer: { proxy: 'http://localhost:5000' } }
- App.vue 获取学生的信息。需要提前在终端键入
npm i axios安装 axios，并导入使用。
<template> <div> <button @click="getStudents">获取学生信息</button> </div> </template> <script> import axios from "axios"; export default { name: "App", methods: { getStudents() { axios.get("http://localhost:8080/students").then( (response) => { console.log("请求成功了", response.data); }, (error) => { console.log("请求失败了", error.message); } ); }, }, }; </script>
二、方法二（可以代理多个服务器的情况）
1. 配置
在 vue.config.js 中添加如下：
module.exports = { pages: { index: { // 入口 entry: 'src/main.js', }, }, lintOnSave: false, //关闭语法检查 // 开启代理服务器 (方式二) devServer: { proxy: { '/api1': { //匹配所有以 /api1 开头的请求路径 target: 'http://localhost:5000', //代理目标的基础路径 pathRewrite: {'^/demo': ''}, //去掉请求头匹配目标地址 ws: true, //用于支持 websocket changeOrigin: true //用于控制请求头中的 host值 } } } }
注意：
changeOrigin 设置为 true 时，服务器收到的请求头中的 host 为：localhost: 5000
changeOrigin 设置为 false 时，服务器收到的请求头中的 host 为：localhost: 8000
changeOrigin 默认值为 true
2. 说明
- 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
- 缺点：配置略微繁琐，请求资源时必须加前缀。
3. 实例
- 准备好 server1.js 和 server2.js 服务器文件，当前文件夹下通过在 cmd 中键入 node server1 启动服务器 server1，通过键入 node server2 启动服务器 server2，并在浏览器中打开。
- vue.config.js 中配置
module.exports = { pages: { index: { // 入口 entry: 'src/main.js', }, }, lintOnSave: false, //关闭语法检查 // 开启代理服务器 (方式二) devServer: { proxy: { // /api：请求前缀 '/demo': { target: 'http://localhost:5000', pathRewrite: { '^/demo': '' }, //去掉请求头匹配目标地址 ws: true, //用于支持 websocket changeOrigin: true //用于控制请求头中的 host值 }, '/test': { target: 'http://localhost:5001', pathRewrite: { '^/test': '' }, //去掉请求头匹配目标地址 ws: true, //用于支持 websocket changeOrigin: true //用于控制请求头中的 host值 } } } }
- App.vue 获取学生和汽车的信息。
<template> <div> <button @click="getStudents">获取学生信息</button> <button @click="getCars">获取汽车信息</button> </div> </template> <script> import axios from "axios"; export default { name: "App", methods: { getStudents() { axios.get("http://localhost:8080/demo/students").then( (response) => { console.log("请求成功了", response.data); }, (error) => { console.log("请求失败了", error.message); } ); }, getCars() { axios.get("http://localhost:8080/test/cars").then( (response) => { console.log("请求成功了", response.data); }, (error) => { console.log("请求失败了", error.message); } ); } }, };
三、注意事项
方法一虽然配置简单，但一次只能代理 一个 服务器。方法二一次可以代理 多个 服务器。
vue.config.js 中配置的地址是 500x（5050），在 App.vue 中 axios 通过 get 得到的地址是 808x（8080）。
方法二在配置过程中，要对请求头通过正则表达式进行 重写，这样可以去掉 axios 请求地址的请求前缀，才能正确匹配。
不积跬步无以至千里 不积小流无以成江海
