第9天：Axios网络请求

Axios的使用

Axios简介

• Axios是前端的网络请求框架，在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。前端做数据请求的技术很多，原始的技术是Ajax，通过发送Ajax请求获取服务端数据，但是原生的Ajax请求使用起来不太方便，目前一般使用基于Ajax的网络请求框架，Axois就是其中之一。
• Axios是一个基于promise网络请求库，作用于node.js和浏览器中。
• Axios在浏览器端使用XMLHttpRequests（Ajax的一个内部类）发送网络请求，并能自动完成JSON数据的转换。
• Axios会自动将请求体里面的数据转成JSON格式传到后端。
• 安装：npm install axios
• 文档地址：http://www.axios-http.cn/

发送网络请求

发送GET请求

异步方式

发送POST请求

异步方式

async/await

其他请求方式

参考：Axios请求配置 https://www.axios-http.cn/docs/req_config

与Vue整合

在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：
① 每个组件中都需要导入 axios
② 每次发请求都需要填写完整的请求路径
可以通过全局配置（main.js）的方式解决上述问题：


组件中的网络请求改写如下：

 // created:function(){
    
    
  //       //箭头函数：其作用域继承它的父级，与created里面的this指代一致
  //       axios.get("http://localhost:8004/user/findAll").then((response)=>{
    
    
  //       this.tableData=response.data
  //   })
  // },
  created:function(){
    
    
        this.$http.get("/user/findAll").then((response)=>{
    
    
        this.tableData=response.data
    })
  },

网络请求在何处进行发送，axios网络请求一般写在created函数里面。

// 生命周期相关函数，组件被创建时调用
  //组件创建时发送网络请求
  created:function(){
    
    
    // console.log("APP组件被创建了")
    axios.get("http://localhost:8004/user/findAll").then(function(response){
    
    
      console.log(response)
    })
  },
  mounted:function(){
    
    
    //完成渲染
    console.log("APP组件被挂载完毕")
  },

跨域

后端启动，前端进行网络请求，代码如上，请求出现错误，控制台报错如下：

出现跨域错误！

跨域是浏览器发送请求经常会出现的问题。

为什么会出现跨域问题

• 为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源，称为同源策略，同源策略是浏览器安全的基石。
• 同源策略（Sameoriginpolicy）是一种约定，他是浏览器最核心也是最基本的安全功能。
• 所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
• 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域，此时无法读取非同源网页的Cookie，无法向非同源地址发送AJAX请求。

在本项目，浏览器url是http://localhost:8081/，但是axios请求的url是http://localhost:8004/，端口不一致，不符合浏览器同源策略，因此出现跨域错误。

跨域问题解决

• CORS（Cross-Origin Resource Sharing）是由W3C制定的一种跨域资源共享技术标准，其目的就是为了解决前端的跨域请求。
• CORS可以在不破坏既有规则的情况下，通过后端服务器实现CORS接口，从而实现跨域通信。
• CORS将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。

简单请求

满足以下条件的请求即为简单请求：

• 请求方法：GET、POST、HEAD
• 除了以下的请求头字段之外，没有自定义的请求头：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
• Content-Type的值只有以下三种：text/plain、multipart/form-data、application/x-www-form-urlencoded

简单请求的服务器处理
对于简单请求，CORS的策略是请求时在请求头中增加一个Origin字段

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

非简单请求

上述有一个条件不满足即为非简单请求。

非简单请求的服务器处理

• 对于非简单请求的跨源请求，浏览器会在真实请求发出前增加一次OPTION请求，称为预检请求（preflight request）

• 预检请求将真实请求的信息，包括请求方法、自定义头字段、源信息添加到HTTP头信息字段中，询问服务器是否允许这样的操作。

• 例如一个GET请求：
  

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

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

• Access-Control-Allow-Methods、Access-Control-Allow-Headers：真实请求允许的方法、允许使用的字段

• Access-Control-Allow-Credentials: 是否允许用户发送、处理cookie

• Access-Control-Max-Age: 预检请求的有效期，单位为秒，有效期内不会重复发送预检请求。

• 当预检请求通过后，浏览器才会发送真实请求到服务器。这样就实现了跨域资源的请求访问。

SpringBoot中配置CORS

方法一：
全局配置，在SpringBoot项目中添加配置类

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    
    
    @Override
    public void addCorsMappings(CorsRegistry registry){
    
    
        registry.addMapping("/**")  //允许跨域访问的路径（控制器）
                .allowedOrigins("*")   //允许跨域访问的源
                .allowedMethods("POST","GET","PUT","OPTIONS","DELETE") //允许请求方法
                .maxAge(168000)   //预检间隔时间
                .allowedHeaders("*")   //允许头部设置
                .allowCredentials(true);  //是否发送cookie
    }
}

方法二：
各个控制器配置，使用@CrossOrigin注解，设置当前控制器跨域，控制器内所有的方法都允许被跨域，其他控制器不行。

@RestController
@CrossOrigin   //设置当前控制器跨域，控制器内所有的方法都允许被跨域，其他控制器不行
public class UserController {
    
    

    @Autowired   //注入usermapper，将UserMapper实例化出的对象自动注入，就有值了
    private UserMapper userMapper;

    @GetMapping("/user/findAll")
    public List<User> find(){
    
    
        return userMapper.selectAllUserAndOrders();
    }
  }

运行结果：
成功请求到数据

获取到的数据进行渲染

<template>
    <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日">
      </el-table-column>
    </el-table>   
    </div>
  </template>
  
  <style>
    .el-table .warning-row {
      
      
      background: oldlace;
    }
  
    .el-table .success-row {
      
      
      background: #f0f9eb;
    }
  </style>
  
  <script>
  // import axios from 'axios'
    export default {
      
      
  //     created:function(){
      
      
  //       // console.log("APP组件被创建了")
  //       //会出现报错，因为回调函数里面的作用域会发生变化
  //       axios.get("http://localhost:8004/user/findAll").then(function(response){
      
      
  //       this.tableData=response.data
  //   })
  // },
  // created:function(){
      
      
  //       // console.log("APP组件被创建了")
  //       //箭头函数：其作用域继承它的父级，与created里面的this指代一致
  //       axios.get("http://localhost:8004/user/findAll").then((response)=>{
      
      
  //       this.tableData=response.data
  //   })
  // },
  created:function(){
      
      
        // console.log("APP组件被创建了")
        //箭头函数：其作用域继承它的父级，与created里面的this指代一致
        this.$http.get("/user/findAll").then((response)=>{
      
      
        this.tableData=response.data
    })
  },
      methods: {
      
      
        tableRowClassName({
       
       row, rowIndex}) {
      
      
          if (rowIndex === 1) {
      
      
            return 'warning-row';
          } else if (rowIndex === 3) {
      
      
            return 'success-row';
          }
          return '';
        }
      },
      data() {
      
      
        return {
      
      
          tableData: []
        }
      }
    }
  </script>

运行结果：