【Vue】第十四部分 使用Vue-cli配置代理

【Vue】第十四部分 使用Vue-cli配置代理

---

---

14. 使用Vue-cli配置代理

14.1 配置代理方式以一

原理：代理服务器和我们所处的端口号是一样的，通过代理服务器和所需要的服务器连接（代理目标的服务器），当我们需要获取数据的时候我们直接向代理服务器拿就可以了，不需要跨域。

14.1.1 配置代理服务器

module.exports = {
   //开启代理服务器
   devServer: {
     //url写的是我们要去代理目标的服务器
      proxy: 'http://127.0.0.1:5001'
    }
}

js代码

<script>
import axios from "axios"
export default {
    name:"App",
    methods:{
      getinfo(){
        //这时我们去访问代理服务器，向代理服务器拿东西
        axios.get('http://192.168.0.104:8081/server').then(
          /* 
            response:表示成功的回调
            error:表示失败的回调
          */
         response =>{
           console.log("请求成功！",response.data);
         },
         error =>{
           console.log("请求失败！",error.message);
         }
        )
      }
    }
}
</script>

14.2 配置代理方式二

 devServer:{
      proxy: {
         '/tree': {  //表示匹配所有以'/tree'开头的请求路径
           target: 'http://127.0.0.1:5001', //代理目标的服务器的基础路径
           pathRewrite:{'^/tree':''}, //重写代理服务器的路径不然访问不到代理目标的服务器
           ws: true, //用于支持websocket
           changeOrigin: true //用于控制请求头中host的值
         },
           '/student': {  //表示匹配所有以'/student'开头的请求路径
           target: 'http://127.0.0.1:5002', //代理目标的服务器的基础路径
           pathRewrite:{'^/student':''}, //重写代理服务器的路径不然访问不到代理目标的服务器
           ws: true, //用于支持websocket
           changeOrigin: true //用于控制请求头中host的值
         }
   }
}


	changeOrigin为true的时候请求头会和代理目标的服务器的端口一致
	changeOrigin为false的时候请求头就是代理服务器本身的端口
  例如：
	changeOrigin设置为true时，服务器收到的请求头中的host为：5001
	changeOrigin设置为false时，服务器收到的请求头中host为：8081

14.2.1 用方式二写的案例

App.vue 组件

<template>
  <div>
      <button @click="getinfo">点击我获取汽车信息</button>
      <button @click="getstu">点击我获取学生信息</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
    name:"App",
    methods:{
      getinfo(){
        // 因为我们配置了以car为开头的请求路径，所以在端口号后面要补上/car
        axios.get('http://192.168.0.104:8081/car/server').then(
          /* 
            response:表示成功的回调
            error:表示失败的回调
          */
         response =>{
           console.log("请求成功！",response.data);
         },
         error =>{
           console.log("请求失败！",error.message);
         }
        )
      },
      getstu(){
         // 因为我们配置了以student为开头的请求路径，所以在端口号后面要补上/student
        axios.get('http://192.168.0.104:8081/stu/student').then(
          /* 
            response:表示成功的回调
            error:表示失败的回调
          */
         response =>{
           console.log("请求成功！",response.data);
         },
         error =>{
           console.log("请求失败！",error.message);
         }
        )
      }
    }
}
</script>

<style>

</style>

存放汽车信息的服务器

const express = require('express')

const app = express()

app.all('/server',(request,response)=>{
    const data = [
        {id:"001",brand:"奔驰",color:"pink"},
        {id:"002",brand:"宝马",color:"red"},
        {id:"003",brand:"玛莎拉蒂",color:"blue"},
    ]

    const str = JSON.stringify(data)
    response.send(str)
})

app.listen(5001,()=>{
    console.log("5001端口已启动！！");
})

存放学生信息的服务器

const express = require('express')

const app = express()

app.all('/student',(request,response)=>{
    const data = [
      {id:"001",name:"Jack",age:18},
      {id:"002",name:"Mark",age:28},
      {id:"003",name:"Jane",age:35},
    ]

    const str = JSON.stringify(data)
    response.send(str)
})

app.listen(5002,()=>{
    console.log("5002端口已启动！！");
})

vue.config.js 配置文件

module.exports = {
   lintOnSave:false,
   //方式一  
   // devServer: {
   //    proxy: 'http://127.0.0.1:5001'
   //  }

   //方式二
   devServer:{
      proxy: {
         '/car': {  //表示匹配所有以'/car'开头的请求路径
           target: 'http://127.0.0.1:5001', //代理目标的服务器的基础路径
           
           //重写代理服务器的路径不然访问不到代理目标的服务器，下面代码的意思是把/car去掉
           pathRewrite:{'^/car':''}, 
           ws: true, //用于支持websocket
           changeOrigin: true //用于控制请求头中host的值
         },
         '/stu': {  //表示匹配所有以'/stu'开头的请求路径
            target: 'http://127.0.0.1:5002', //代理目标的服务器的基础路径
           
           //重写代理服务器的路径不然访问不到代理目标的服务器，把/stu去掉
            pathRewrite:{'^/stu':''}, 
            ws: true, //用于支持websocket
            changeOrigin: true //用于控制请求头中host的值
          }
   }
}
}

14.3 总结配置代理

配置代理方式一：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：优先匹配前端资源，如果前端有资源就直接返回不会向后端拿数据（public文件夹中的资源就是前端资源），所以就会导致不能灵活控制是否走代理。

配置代理方式二：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

   //走数据代理
   http://192.168.0.104:8081/stu/student  
   //把前缀去掉就是不走代理
   http://192.168.0.104:8081/student
   

2. 缺点：配置略微繁琐，请求资源时必须加前缀。

3. 总结来说：设置了请求路径，我们在再向代理服务器发送请求时必须要加上请求路径，代理服务器去访问代理目标的服务器就需要将请求路径删除才能请求到，因为代理目标的服务器没有这个请求路径。

---

总结

以上就是今天要讲的内容，使用Vue-cli配置代理的两种方法，希望对大家有所帮助！