Vue配置代理，v-resource(ajax库)

配置代理

解决Ajax跨域问题

有以下几种方法

• cors
• jsonp script src
• 代理服务器

8080服务器<= =>代理服务器（8080）<= =>要请求的服务器（5000）

如果要请求5000服务器上的数据，那么要通过代理服务器8080请求。代理服务器同样能请求public文件夹中的内容。所以如过public文件夹中有和5000服务器中同名的文件那么代理服务器请求到的为public文件夹中的文件。

利用vue-cli开启代理服务器

在vue.config.js进行配置

//方式一
//开启代理服务器(不能配置多个代理，不能控制走不走代理)
  devServer:{
    proxy:'http://localhost:5000'
  }

//方式二
devServer:{
        proxy:{
          '/api':{
                target:'http://localhost:5000',
                pathRewrite:{
                  //路径重写，将/api都变为空
                  '^/api':''},
                ws:true	//用于支持websocket
                changeOrigin:true	//用于控制请求中的host字段的值
                }
            }
  		}

methods:{
    getStudent(){
            axios.get('http://localhost:8080/students').then(response=>{
                console.log('成功获取学生信息',response.data);
            },err=>{
                console.log('失败',err.msg);
            })
        },
    }

v-resource(ajax库)

是vue中的插件库，官方不再维护,vue1.0中使用较多，了解即可

1. 安装
   • npm i vue-resource
2. 引入
   • import vueResource from ‘vue-resource’
3. 声明插件
   • vue.use(vueResource)
4. 使用
   • 使用方法和axios一模一样，axios.get()变为this.$http.get()