配置vue/cli代理服务器

一，概念

• 为什么要配置代理服务器，因为在请求数据时，会产生跨域问题，为什么会产生跨域问题，因为违反了浏览器的同源策略，什么是同源策略，同源策略指点是，‘同一协议名（http或httqs） 同一域名（localhost），同一端口号’，
• 什么是代理服务器 ：
  就是在你本机开启一个服务器，这个服务器和你的浏览器（同源）你发送请求给这个代理服务器发，代理服务器收到请求后，就直接转发给你真正请求的服务器，如下图

二，配置单个代理服务器

1. 创建

   // 和src平级目录下建立一个vue.config.js在里面
      module.exports = {
         devServer:{
           // 开启后需要重启服务器
         proxy:"http://localhost:5000"
    }

2. 使用

      // http://localhost:8080/students  如果public文件里有这个students就不会请求 （缺点）
            axios.get("http://localhost:8080/students").then(
                // 成功了response
                response=>{ 
                    // 成功了返回的是 response 响应对象 响应对象里的data才是数据
                    console.log("请求成功了",response.data);
                },
               // 失败了 error
                error=>{
                     // 失败了返回的是  error 响应对象 响应对象里的message才是错误的原因
                    console.log("请求失败了",error.message);
                }
            )    
        }

三 ，配置多个代理服务器

1. 创建：在src平级目录下建立一个vue.config.js在里面

  //在src平级目录下建立一个vue.config.js在里面
  module.exports = {
  devServer:{
     proxy:{
        "/atguigu":{
           target:"http://localhost:5000",
          // 因为这个路径http://localhost:5000 发送请求的时候会改成 http://localhost:5000/atguigu  所以要用pathRewrite重写路径
           pathRewrite:{"^/atguigu":""},
           ws:true, //用于支持websocket
           changeOrigin:true//用于控制请求头中的host值 // true为8080，false为你   "atguigu":"http://localhost:5000",的端口号
        },
        "/demo":{
          target:"http://localhost:5001",
         // 因为这个路径http://localhost:5000 发送请求的时候会改成 http://localhost:5000/atguigu  所以要用pathRewrite重写路径
          pathRewrite:{"^/demo":""},
          ws:true, //用于支持websocket
          changeOrigin:true//用于控制请求头中的host值 // true为8080，false为你   "atguigu":"http://localhost:5000",的端口号
           },
         }
       }
    })
  }

2. 使用

 getStudents(){
            // http://localhost:8080/students  如果public文件里有这个students就不会请求 （缺点）
            axios.get("http://localhost:8080/atguigu/students").then(
                // 成功了response
                response=>{ 
                    // 成功了返回的是 response 响应对象 响应对象里的data才是数据
                    console.log("请求成功了",response.data);
                },
               // 失败了 error
                error=>{
                     // 失败了返回的是  error 响应对象 响应对象里的message才是错误的原因
                    console.log("请求失败了",error.message);
                }
            )    
        },
        getCars(){
            console.log(111);
            // http://localhost:8080/students  如果public文件里有这个students就不会请求 （缺点）
            axios.get("http://localhost:8080/demo/cars").then(
                // 成功了response
                response=>{ 
                    // 成功了返回的是 response 响应对象 响应对象里的data才是数据
                    console.log("请求成功了",response.data);
                },
               // 失败了 error
                error=>{
                     // 失败了返回的是  error 响应对象 响应对象里的message才是错误的原因
                    console.log("请求失败了",error.message);
                }
            )    
        }
    }