文章参考来源Axios网络请求

Axios了解

简介

Axios是基于promise网络请求库(基于AJAX的网络请求框架),作用于node.js和浏览器中
Axios在浏览器端使用XMLHttpRequests发送网络请求,并能自动完成JSON数据的转换

安装

官网地址:更多安装方式以及教程参考官方文档

npm安装：
1
npm install axios
导入import axios form 'axios'

可以全局导入也可以哪个组件用哪里导入，注意axios导入和正常写路径不同

发送网络请求

发送GET请求

方法一：在axios方法中直接传入一个对象，配置请求路径：url,
传递参数：params。然后使用。.then方法获得响应数据

//配置接口地址
axios.defaults.baseURL = 'http://127.0.0.1:3000'
function testget() {
            axios({
                    url: '/a',
                    params: {
                        id: 1
                    }
                })
                .then(response => {
                    console.log('/a', response.data)
                    return response.data
                }, error => {
                    console.log('错误', error.message)
                })
        }
testget()

方法二：

function testget() {
    axios.get('/a?id=1').then(response => {
        console.log('/a', response.data)
    })
}

发送POST请求

方法一：

function testpost() {
    axios.post('/a', {
        "id": 5,
        "name": "ssss"
    }).then(response => {
        console.log('/a1', response.data)
    }, error => {
        console.log('错误', error.message)
    })
}
testpost()

方法二：

function testpost() {
    axios({
            method: 'POST',
            url: '/a',
            data: {
                id: 1,
                name: "张三"
            }
        })
        .then(response => {
            console.log('/a', response.data)
            return response.data
        }, error => {
            console.log('错误', error.message)
        })
}

testpost()

异步回调问题

async/await

//支持async/await用法
saync functionh getUser(){
  try{
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error){
    console.error(error);
  }
}

如此一来，就可以做到”同步形式”接受到信息(实际还是异步)

其他请求方式

参考：参考点我

跨域问题

情景提要

前端和后端不可能在同一个端口运行，当我们想要向后端请求访问数据的时候：
假设8080的前端向8088的后端发送请求，就会出现跨域问题导致访问失败

为什么会出现跨域问题

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

跨域问题的解决原理

解决方法不止这一种，这里只了解其中一个常见的解决方案

CORS(Cross-origin Resouce 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:预检请求的有效期，单位为秒

Spring Boot中配置CORS

在传统Java EE开发中，可以通过过滤器统一配置，而Spring Boot中对此则提供了更加简洁的解决方案

方法一：

@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 允许所有路径的跨域请求
.allowedOrigins("http://localhost:8080") // 允许来自该域的请求
//如果失败,尝试.allowedOriginPatterns可以使用通配符的版本
.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法
.maxAge(3600); // 预检请求的缓存时间
.allowedHeaders("*") // 允许的请求头
.allowCredentials(true) // 允许发送cookie
}
}

这其实是一种全局配置，更多方案可以查度娘

方法二：在对应的控制器上加上@CrossOrigin可以实现单个配置

Vue中通过axios获取数据

此处代码为参考视频中的例子，可以配合食用

created:function(){
  axios.get("http://localhost:8088/user/findAll").then((response)=>{
    this.tableData = response.data
  })
},
data(){
  return{
    tableData:[]
  }
}

Axios与Vue整合

在实际项目开发中，几乎每个组件中都会用到axios发起数据请求。
可以通过全局配置的方式高效使用

//在main.js中导入
//导入axios
import axios form 'axios'
// 配置请求根路径
axios.defaults.baseURL = "http://localhost:8088"
//将axios作为全局的自定义属性，每个组件可以在内部直接访问(Vue2)
Vue.prototype.$http = axios
//将axios作为全局的自定义属性，每个组件可以在内部直接访问(Vue3)
app.config.globalProperties.$http  = axios
//$http约定俗成，其实也是可以改的

此时前面的axios.get变成:

created:function(){
  this.$http.get("/user/findAll").then((response)=>{
    this.tableData = response.data
  })
},
data(){
  return{
    tableData:[]
  }
}