《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource

文章目录

• ​​6.1问题：回顾发送ajax请求方式？​​
• ​​6.2安装axios​​
• ​​6.3vue-cli脚手架配置代理服务器​​

• ​​6.3.1解决跨域问题：配置代理_方式1​​

• ​​案例：开2台模拟服务器，模拟客户端端口8080调用2台服务器端口叫5000和5001，实现ajax解决跨域查询数据​​
• ​​完整代码：​​

• ​​6.3.2解决跨域问题：配置代理_方式2​​

• ​​案例：开2台模拟服务器，模拟客户端端口8080调用2台服务器端口叫5000和5001，实现ajax解决跨域查询数据​​
• ​​完整代码：​​

• ​​6.4vue-resource​​

• ​​6.4.1vue-resource​​
• ​​6.4.2使用vue-resource​​

• ​​补充说明：模拟后端代理服务器.zip​​

概述：主要解决使用vue-cli脚手架去解决跨域问题

6.1问题：回顾发送ajax请求方式？

答案：
1.xhr newXMLHttpRequest()
2.jQuery $.get $.post jQuery对xhr进行了2次封装
3.axios(推荐使用) 体积小，大约只有jQuery的1/4大小，axios对xhr进行了2次封装
4.fetch 而fetch是跟xhr平级的，所以如果xhr不让用了，那么jQuery和axios就都不能用了，而fetch可以继续使用。fetch有2个致命的问题：1）对返回数据包2层，获取数据费事；2）兼容性问题，IE就不能用fetch
5.vue-resource 对xhr进行了2次封装，vue 插件库, vue1.x 使用广泛，官方已不维护。

6.2安装axios

命令：npm i axios

6.3vue-cli脚手架配置代理服务器

6.3.1解决跨域问题：配置代理_方式1

配置方式

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

案例：开2台模拟服务器，模拟客户端端口8080调用2台服务器端口叫5000和5001，实现ajax解决跨域查询数据

注意点0：模拟启动服务器方式，进入test_proxy_server文件夹 =》 执行cmd =》 执行node server1即可开启端口号为5000的服务器，同理执行node server2即可开启端口号为5001的服务器。

注意点1：配置代理代码写在vue.config.js文件中，且vue.config.js文件新写入代码了，脚手架必须重启后才能生效。

注意点2：axios,get()碰到了跨域问题

注意点3：

问题：为啥跨域？

答案：跨域指的是违背了同源策略，规定3东西（协议名、主机名、端口号）必须一致。

注意点4：

问题：如果发生跨域，那么请求究竟发没发过去？

答案：请求发过去了，服务器也接收了，服务器还返回了呢，但是你客户端拿不到。

注意点5：

问题1：解决跨域问题的方式？

答案：

1.cors 后端返回响应时加几个特殊的响应头即可，前端啥又不用做。但是：一般不会这么用，因为配置了cors后那么任何人都可以向这台服务器获取数据，这是不对的，cors应该只设置某些服务器才对。

2.jsonp 原理：借助script标签里的src属性，在引入外部资源的时候不受同源策略限制的特点办到的。但是缺点：1）前后端都得写东西，得一起配合 ；2）它只能解决get请求跨域问题，其他post、put、delete等等都解决不了

3.配置代理服务器(推荐使用) 代理服务器特点：它跟你所处的位置是一样的。比如客户端端口号叫8080，那么配置代理服务器后端口号也叫8080，而不是端口号叫5000，代理服务器类似中介

问题2：代理服务器粉色框8080 -> 蓝色框5000服务器的两条线，是不是还是跨域？端口号对不上？

答案：不影响，因为粉色框和蓝色框都是服务器，服务器和服务器打交道不用ajax（ajax是页面访问服务器的方式），而是使用传统的http请求，所以同源策略跟本管不到“画红圈”的两条线。

注意点6：

问题：如何开启代理服务器？方式有哪些？

答案：1）nginx 2）vue-cli脚手架帮我们开启

注意点7：

问题1：vue-cli如何配置代理服务器？

答案：上官网查找如图，进行配置

//开启代理服务器
module.exports = {
  devServer: {
    proxy: 'http://localhost:5000'
  }
}

问题2：开启代理服务器的指定端口，指定8000？还是指定5000？

答案：指定5000，因为8080不用你操心，默认所处位置是8080，那么代理服务器默认端口也是8080，而配置的端口号只是配置一会请求要转发到哪个服务器端口号即可

问题3：proxy: 'http://localhost:5000’只指定到5000端口号？后面距离接口路径呢？

答案：proxy: 'http://localhost:5000’只指定到5000端口号即可，后面的/student请求路径不能添加上，不要添加具体路径了。

注意点8：

问题：配置完代理服务器，也重新启动脚手架，点击按钮调用接口还是报跨域？

代码如图如下

答案：你配置完代理服务器了，那么调用接口就不能调5000了，你应该调代理服务器的8080才能接口调通，正确如图如下

注意点9：代理服务器有2个细节问题说名

问题1：代理服务器不是把所有请求都转给5000，当你请求的资源8080本身就有，那么就不会去请求5000。

举例1：访问项目里的public文件夹里的东西，就相当于直接访问8080上面的资源，那么就不会触发服务器端口号为5000的请求响应。

问题2：如果请求路径是http://localhost:8080/student，而我public文件夹下也有个叫student的文件，那么调用接口就不会请求5000服务器了，而是直接把8080的public文件夹下的student内容当作接口返回值返回了。

注意点10：配置一方式配置的代理服务器只能配置单个的单例服务器。不完美第1点：很局限，无法配置多个代理服务器。不完美第2点：无法去控制调用接口走不走代理服务器，只能说请求的8080没有了，才会把请求转发到代理服务器。

完整代码：

vue.config.js

module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    },
    lintOnSave:false, //关闭语法检查
    //开启代理服务器（方式1）
    devServer: {
        proxy: 'http://localhost:5000'
    }
}

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
  el:'#app',
  render: h => h(App)
})

App.vue

<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>

结果展示：

6.3.2解决跨域问题：配置代理_方式2

配置方式

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

案例：开2台模拟服务器，模拟客户端端口8080调用2台服务器端口叫5000和5001，实现ajax解决跨域查询数据

注意点1：

注意点2：

注意点1的图中’/api’叫前缀，这个前缀就是用来控制代理服务器是否发送请求的，如果请求路径包含特定前缀，那么就会去发送请求到5000服务器

注意点3：

问题：前缀定义了，加到请求路径的哪里？

答案：放在端口的后面，比如：

axios.get('http://localhost:8080/api/students').then();

注意点4：

问题：proxy中配置前缀和’/atguigu’标签，调用接口还是报错如图？

错误代码：

axios.get('http://localhost:8080/atguigu/students').then();

答案：代理服务器配置前缀/atguigu后，粉色框发送请求到蓝色框的路径为/atguigu/students，而实际5000服务器接口叫/students，不叫/atguigu/students，多了个前缀，所以报404找不到，正确办法是发送到5000的请求路径自动把前缀删掉才能调通。解决方案：添加配置属性pathRewrite:{‘^/atguigu’,’’}，寓意为匹配所有以/atguigu开头的字符串自动转换成空字符

注意点5：

ws属性：用域是否支持websocket

changeOrigin属性：用于控制请求头中的host值是否为真（就是设置是否欺骗5000服务器），如图，举例：粉色框代理服务器到绿色框5000服务器的带红圈的这条线，如果changeOrigin设置true，那么5000服务器获取到请求会问代理服务器你从哪来啊，代理服务器回答我从5000而来；如果changeOrigin设置false，那么5000服务器获取到请求会问代理服务器你从哪来啊，代理服务器会如实回答我从8080而来。默认不写，vue也会配置changeOrigin：true，而React框架中默认不配置，则changeOrigin为false

问题：changeOrigin这属性有啥用？

答案：比如5000服务器做了防火墙拦截，非5000端口过来的请求一律不能进入，这时候就需要设置changeOrigin:true了，这样请求就会欺骗5000从而放行请求通过了，所以正常使用都需要配置changeOrigin:true

验证changeOrigin属性的不同效果展示

完整代码：

vue.config.js

module.exports = {
    pages: {
        index: {
            //入口
            entry: 'src/main.js',
        },
    },
    lintOnSave:false, //关闭语法检查
    //开启代理服务器（方式1）
    // devServer: {
    //     proxy: 'http://localhost:5000'
    // },
    //开启代理服务器（方式12）
    devServer: {
        proxy: {
            '/atguigu': {
                target: 'http://localhost:5000',
                pathRewrite:{'^/atguigu':''},
                ws: true,
                changeOrigin: true
            },
            '/demo': {
                target: 'http://localhost:5001',
                pathRewrite:{'^/demo':''},
                ws: true,
                changeOrigin: true
            }
        }
    }
}

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
  el:'#app',
  render: h => h(App)
})

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/atguigu/students').then(
          response => {
            console.log('请求成功了',response.data)
          },
          error => {
            console.log('请求失败了',error.message)
          }
      )
    },
    getCars(){
      axios.get('http://localhost:8080/demo/cars').then(
          response => {
            console.log('请求成功了',response.data)
          },
          error => {
            console.log('请求失败了',error.message)
          }
      )
    }
  },
}
</script>

结果展示如图：

6.4vue-resource

6.4.1vue-resource

命令：npm i vue-resource

6.4.2使用vue-resource

第1步：引入插件

//引入插件
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource)

第2步：调用

axios方式

axios.get(“url”).then()

vue-resource方式

this.$http.get(“url”).then()

补充说明：模拟后端代理服务器.zip

2台模拟器，请查看我上传的资源文件进行下载，叫模拟后端代理服务器.zip文件夹。

使用方法：进入test_proxy_server文件夹 =》 执行cmd =》 执行node server1即可开启端口号为5000的服务器，同理执行node server2即可开启端口号为5001的服务器。

说明点1：主要用于测试前端向后端发送接口，响应数据为json格式字符串，该文件我自己用于vue调用axios调用后端接口获取json返回参数这么一个目的。

说明点2：服务器server1端口号为5000，接口路径为：http://localhost:5000/students；服务器server2端口号为5001，接口路径为：http://localhost:5001/cars

说明点3：它里面有2个主要文件，server1.js和server2.js，启动方式是进入解压目录执行cmd命令 =》打开控制台后 =》 输入node server1即可开启server1服务器，同理开启server2服务器。