springboot和vue2：十一、Axios网络请求的安装引入与使用、跨域问题解决(CORS)

Axios简介与安装

• Axios是一个基于promise的网络请求库，作用于node.js和浏览器中
• Axios在浏览器端使用XMLHttpRequests发送网络请求，并自动完成json数据的转换
• 安装：npm install axios
• 官方文档：https://www.axios-http.cn/

Axios基础语法

首先要在App.vue中导入axios，像其他组件一样导入即可。

import axios from 'axios';

get请求

当参数比较少时，直接在路径里面用问号拼接传入。
then里面的是个回调函数，原始形态是如下：

    axios.get("/user?id=1234")
    .then(function(response){
      //处理成功的情况，走then里面的回掉函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的回掉函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });

当参数比较多时，可以使用params传入。

    axios.get("/user",{
      params:{
        id:12345
      }
    })
    .then(function(response){
      //处理成功的情况，走then里面的回掉函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的回掉函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });

但因为回调函数的作用域改变，如果想要在axios里面使用this指针，会报错undefinded，所以更经常的是如下箭头函数的形式，使得回调函数的作用域和其父级相同。

axios.get("/user/findAll")
      .then((response)=> {
        console.log(response);}
        )
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        console.log("请求成功发送");
      });

post请求

axios会自动把请求体里的数据，在这里即username和password字段，转成json后传给后端。

axios.post("/user",{
      username: 'shanshan',
      password: '12345'
    })
    .then(function(response){
      //处理成功的情况，走then里面的函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });

支持async/await用法（同步）

上述都是异步执行的用法，如果想要同步请求的话，需要采用async和await的语法糖。async和await必须是成对出现的（这一段严谨来说都不是正确的，但是刚开始学可以这么理解）

    async function getUser() {
      try {
        const response = await axios.get('user?id=12345');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }

同步和异步的解释

同步：当前任务A在执行时，另个任务B必须等待A先结束在能开始执行。
异步：当任务A在执行时，另个任务B也可以同时开始执行。

restful风格的封装

上述api，axios都有封装成restful风格

axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

跨域问题

同源策略与CORS

• 同源策略：为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
• 同源：即两个页面具有相同的协议（http/https）、主机、端口号。
• 也就是说如果一个请求url的协议、域名、端口三者之前任意一个与当前页面url不同，即为跨域，那么就无法读取非同源网页的Cookie，且无法向非同源地址发送ajax请求。

为了解决跨域问题，CORS制定了一个技术标准，使得可以在不破坏既有规则的前提下，通过后端服务器实现CORS接口，从而实现跨域通信。

CORS将请求分为两类：简单请求和非简单请求。
满足以下条件的即为简单请求：

1. 请求方法：GET、POST、HEAD
2. 请求头只有如下字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type。
3. 且Content-Type的值只有以下三种：
   • application/x-www-form-urlencoded
   • multipart/form-data
   • text/plain

对于java服务，在后端的controller类上面加一个@CrossOrigin注解，即可使得控制器内所有请求都通过跨域问题。

简单请求的CORS处理

对于简单请求，CORS的策略是在请求时在请求头增加一个Origin字段告诉本请求来自于哪，如下：

Host:localhost:8080
Origin:http://localhost:8081
Referer:http://localhost:8081/index.html

服务器收到请求后，根据该字段判断是否允许该请求访问，**如果允许，则在响应的HTTP头信息中添加Access-Control-Allow-Origin**字段，如下。

Access-Control-Allow-Origin:http://localhost:8081
Content-Length:20
Content-Type:text/plain;charset=UTF-8
Date:Thu,12 Jul 2018 12:51:14 GMT

非简单请求的CORS处理

对于非简单请求的跨源请求，浏览器会在真实请求发出前增加一次OPTION请求，称为预检请求(preflight request)
预检请求将真实请求的信息，包括请求方法、自定义头字段，当然还有Origin字段，添加到HTTP头信息字段中，询问服务器是否允许这样的操作。例如一个GET请求：

OPTIONS /test HTTP/1.1
Origin:http://www.test.com
Access-Control-Request-Method:GET
Access-Control-Request-Headers:X-Custom-Header
Host:www.test.com

Access-Control-Request-Method表示请求使用的HTTP方法，Access-.Control-Request-Headers包含请求的自定义头字段

服务器收到请求时，需要分别对Origin、Access-Control--Request-Method、Access-Control-Request-Headers进行验证，验证通过后，会在返回HTTP头信息中添加：

Access-Control-Allow-Origin:http://www.test.com
Access-Control-Allow-Methods:GET,POST,PUT,DELETE
Access-Control-Allow-Headers:X-Custom-Header
Access-Control-Allow-Credentials:trye
Access-Control-Max-Age:1728000

Access--Control-Allow-Methods、Access-.Control-Allow-Headers:真实请求允许的方法、允许使用的字段
Access-Control-Allow-Credentials:是否允许用户发送、处理cookie。即该请求是否可以向后端发送cookie。
Access-Control-Max-Age:预检请求的有效期，单位为秒，有效期内不会重复发送预检请求。

Axios基本使用

注意axios的发送一般要写在生命周期函数里面，而不是methods里面，methods里面一般放我们自定义的函数。生命周期函数要和name、data、components齐平，所以最终结果长成如下样子：

而且要额外声明下axios发送的域名和端口号，否则它会发送到自己前端页面的域名和端口号，不会发送到后端服务的。

而且每个组件里面都加上import axios from 'axios';属实麻烦，所以可以统一挪到main.js里面。
最终形式如下：
在main.js里写上如下：

import axios from 'axios';
// 配置请求根路径为后端服务地址
axios.defaults.baseURL = 'http://localhost:8088'
// 将axios作为全局的自定义属性，每个组件就都可以在内部直接访问
// vue2写法
Vue.prototype.$http = axios
// vue3写法
app.config.globalProperties.$http = axios

在App.vue里发送axios请求，一般在页面被挂载前就发送
App.vue:

<template>
	<div>
		<el-table
			:data="tableData"
				<el-table-column
					prop="date"
					label="日期"
					width="180">
				<el-table-column
					prop="name"
					label="姓名"
					width="180">
				<el-table-column
					prop="address"
					label="地址"
					width="180">
		</el-table>
	</div>
</template>
					
export default {
  name: 'App',
  data: function () {
    return {
      tableData: []
    }
  },
  created: function () {
    this.$http.get("/user/findAll")
      .then((response)=> {
        console.log(response);
        this.tableData = response.data;
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        console.log("请求成功发送");
      });
  },
  mounted: function () {
    console.log("app被挂载完毕");
  }
}