Axios网络请求

Axios的使用

Axios简介

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。
Axios是一个基于promise网络请求库，作用于node.js和浏览器中。
Axios在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换。

安装：npm install axios
地址：https://www.axios-http.cn/
异步回调 async/await

与Vue整合

在main.js引入axios

import axios from 'axios'

axios.defaults.baseURL = "http://localhost:8085"
Vue.prototype.$http = axios

created: function () {
    // this作用域继承父类
    this.$http.get("/user/findAll").then((response) => {
      // 异步执行，只有全部请求成功之后才会执行这一行
      this.tableData = response.data
    })
  },

跨域

原因

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

解决方法

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

Spring Boot配置CORS

1. 在Controller上添加@CrossOrigin注解
2. 通过过滤器统一配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 允许跨域访问的路径
                .allowedOrigins("*") // 允许跨域访问的源
                .allowedMethods("GET", "POST", "OPTIONS", "DELETE") //允许请求方式
                .maxAge(168000) // 预检间隔时间
                .allowedHeaders("*") //允许头部设置
                .allowCredentials(true); // 是否发送cookie
    }
}