Vue的Axios介绍【9】

1.介绍：

概述：

官方文档： http://www.axios-js.com/zh-cn/docs

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中向服务器发送请求；

特性：

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

2.使用axios：

1.安装axios：

npm install axios

2.发送请求：

1.发送请求的方式：

  发送请求一般有两种方式：

• 直接调用axios实例的请求方法发送请求；
  

axios.get('请求路径').then(function (response) {请求之后执行的操作，response表示响应对象}).catch(function (error) { 请求错误时执行的操作，比如打印错误信息console.log(error);}).finally(()=>{一定执行的操作，一般用于释放资源});        

• 通过配置axios实例进行发送请求
  

axios({method: '请求方式',url: '请求路径',data: {携带的参数，如果是get请求则将data改为params}
});   

2.发送请求：

1.发送get请求：

发送get请求时，携带参数一般有两种形式：

•   参数直接以键值对形式拼接在url中；
  

•   参数以params对象的形式写在get方法的第二个参数中；
  

<template><button @click="sendGet">发送get请求</button>
</template><script lang="ts" setup name="App">
import axios from "axios";const sendGet = () => {//get请求方式1：url路径中拼接参数// axios.get('http://localhost:8081/garden/sendGet?pageNum=1&pageSize=10&name=zs')//写法2:参数已配置对象形式定义，本质上与方式1相同axios.get('http://localhost:8081/garden/sendGet', {params: {pageNum: 1,pageSize: 10,name: 'zs'}}).then((response) => {console.log(response)}).catch((error) => {console.log("请求错误", error.messages)}).finally(() => {console.log("资源释放")})
}</script><style scoped></style>

启用后台服务进行测试：

2.发送post请求：

发送post请求时有两种参数携带方式：

• json形式的参数(默认形式)，后台接收参数时要通过@requestBody注解进行接收；
  

• 表单形式的参数（键值对形式），后台可正常接收；
  

发送json形式的post请求：

<template><button @click="sendGet">发送get请求</button><button @click="sendPost">发送json形式的post请求</button>
</template><script lang="ts" setup name="App">
import axios from "axios";//json形式的post请求
const sendPost = () => {axios.post('http://localhost:8081/garden/loginIn', {userCode: 'admin',userPwd: '123456',userName: 'testadmin'}).then((response) => {console.log(response)}).catch((error) => {console.log("请求错误", error.messages)}).finally(() => {console.log("资源释放")})
}</script><style scoped></style>  

测试：

发送表单形式的post请求：

注意：在axios中，post请求的参数形式默认为json形式，因此发送表单形式参数的post请求时，就需要进行配置，否则后台服务器无法接收；

<template><button @click="sendGet">发送get请求</button><button @click="sendPost">发送json形式的post请求</button><button @click="sendPostForm">发送表单形式的post请求</button>
</template><script lang="ts" setup name="App">
import axios from "axios";
//表单形式的post请求
const sendPostForm = () => {const ajax=axios.create({//请求的前置路径baseURL: 'http://localhost:8081/garden/',//请求的超时  时间timeout: 3000,//请求的头  配置headers: { 'content-type': 'application/x-www-form-urlencoded' }// headers: { 'content-type': 'application/json' }//默认值})ajax.post('/sendPost', {pageNum: 1,pageSize: 10,name: 'zs'}).then((response) => {console.log(response)}).catch((error) => {console.log("请求错误", error.messages)}).finally(() => {console.log("资源释放")})
}</script><style scoped></style>   

说明：在上述案例中，我们并没有直接使用axios的实例对象，而是通过axios中的create函数自定义了一个axios对象ajax；然后在自定义ajax时，进行了一些配置，比如前置路径，超时时间，以及头信息，上面我们说的配置表单形式参数就在头信息中进行配置；之后我们通过我们创建的对象ajax进行发送请求；

测试：

3.请求跨域：

1.请求的跨越问题：

同源策略：

浏览器的同源策略是一种安全机制。它规定，一个网页的脚本只能访问与该网页同源的资源。这里的 “源” 由协议（如`http`、`https`）、域名（如`example.com`）和端口（如`8080`）三部分组成。只有当这三个部分完全相同的时候，才被认为是同源。

跨域定义：

当一个请求的源与被请求资源的源不同时，就产生了跨域请求。例如，一个网页（http://www.example.com）中的 JavaScript 脚本向https://api.otherdomain.com发送一个请求，因为协议和域名都不同，所以这是一个跨域请求。

2.如何解决跨域问题：

概述：

解决跨域问题一般可通过后台服务器或前端进行处理，我们上面的请求实际上也是跨域，但之所以没有阻拦请求，是因为在后台服务器已经做了关于跨域的处理；

解决方式：

方式1：后台处理：

 @Configuration
public class GardenConfigurer {// 设置允许跨域请求@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")// 允许跨域的域名.allowedOriginPatterns("*") // 允许所有域.allowedMethods("*") // 允许任何方法（post、get等）.allowedHeaders("*") // 允许任何请求头.allowCredentials(true) // 允许证书、cookie.exposedHeaders(HttpHeaders.SET_COOKIE)//maxAge(3600)表明在3600秒内， 不需要再发送预检验请求，可以缓存该结果.maxAge(3600L); //}};}
}

说明：

• @Bean 注解：用于将方法返回的对象作为一个 Bean 注册到 Spring 容器中。在这里，corsConfigurer 方法返回一个实现了 WebMvcConfigurer 接口的匿名类对象，这个对象将作为一个 Bean 被 Spring 容器管理，并且其主要作用是配置 CORS 相关的设置。
• addCorsMappings 方法：这是 WebMvcConfigurer 接口中定义的一个方法，用于配置跨域请求的映射规则。在这里对其进行了重写，以实现具体的跨域设置。
• addMapping("/**")：表示对所有的请求路径（/** 是一个通配符，表示任意路径）都应用下面定义的跨域规则。也就是说，无论客户端请求应用的哪个接口或资源，都会按照这里设置的跨域规则来处理。
• allowedOriginPatterns("*")：设置允许跨域的域名模式。这里使用 * 表示允许所有的域名来源发送跨域请求。不过在实际生产环境中，可能需要更严格地限制允许的域名，以确保安全性。例如，可以指定具体的几个信任的域名，如 http://trusted-domain1.com、http://trusted-domain2.com 等。
• allowedMethods("*")：允许任何 HTTP 请求方法进行跨域操作，包括常见的 POST、GET、PUT、DELETE 等方法。这意味着客户端可以使用任何合法的请求方法向应用发送跨域请求。
• allowedHeaders("*")：允许任何请求头信息随跨域请求一起发送。在一些复杂的应用场景中，客户端可能会在请求头中携带一些自定义的信息，比如认证令牌、用户相关的元数据等，这里的设置允许这些请求头顺利通过跨域检查。
• allowCredentials(true)：设置为 true 表示允许在跨域请求中携带凭证（如 Cookie 等）。这在需要基于用户认证并且要在跨域场景下保持用户会话状态的情况下非常重要。不过，当允许携带凭证时，allowedOriginPatterns 就不能再使用通配符 *，而需要明确指定具体的信任域名，以确保安全。
• exposedHeaders(HttpHeaders.SET_COOKIE)：指定哪些响应头信息在跨域请求时可以被暴露给客户端。这里指定了 HttpHeaders.SET_COOKIE，意味着当后端在响应中设置了 Cookie 相关的信息时，这些信息可以通过跨域请求被客户端获取到。这对于一些需要通过 Cookie 来维护用户状态或者进行其他操作的场景很重要。
• maxAge(3600L)：表示在 3600 秒（即 1 小时）内，对于相同的跨域请求源和请求方法组合，不需要再发送预检验请求（OPTIONS 请求），可以直接根据缓存的结果进行处理。这有助于提高跨域请求的处理效率，减少不必要的网络开销。

方式2：前端进行处理

  在前端进行处理时一般通过请求代理的方式实现；

4.请求代理：

1.概述：

请求代理是一种服务器，它位于客户端和目标服务器之间。当客户端发起请求时，请求会先发送到代理服务器，然后由代理服务器转发给目标服务器。目标服务器返回的响应也会先经过代理服务器，再由代理服务器将响应传递回客户端。从客户端的角度来看，它似乎是直接与目标服务器进行通信，但实际上所有的请求和响应都经过了代理服务器这个中间环节。

2.实现：

1.配置vite.json

server: {//配置代理服务器端口port: 8080,proxy: {//针对不同的后台服务器进行配置'/dev': {//目标服务器的IP地址及端口target: 'http://localhost:8081/',//开启请求代理changeOrigin: true,//通过正则表达式去掉请求路径中多拼接的配置名rewrite: (path) => path.replace(/^\/dev/, '')},'/dev2': {target: 'http://localhost:8082/',changeOrigin: true,rewrite: (path) => path.replace(/^\/dev/, '')},}}  

2.发送请求：

<template><button @click="sendGet">发送get请求</button><button @click="sendPost">发送json形式的post请求</button><button @click="sendPostForm">发送表单形式的post请求</button><button @click="test">使用代理请求后台</button>
</template><script lang="ts" setup name="App">
import axios from "axios";
//请求代理
const test = () => {axios({url: '/dev/garden/getGardenData',method: 'get',params: {}}).then((response) => {//请求成功之后  response(响应的结果)//response.data 请求的返回结果console.log(response);// sessionStorage// localStorage// JSON.parse()// JSON.stringify()}).catch((error) => {//发生异常console.log('发生异常：', error.message);}).finally(() => {console.log("一定执行  释放资源")})
}</script><style scoped></style>   

3.测试：

5.请求拦截：

1.请求拦截：

//请求拦截器ajax.interceptors.request.use(function (config) {console.log("请求拦截.......")return config;}, function (error) {// Do something with request errorreturn Promise.reject(error);});  

2.响应拦截：

//响应拦截器ajax.interceptors.response.use(function (response) {console.log("响应拦截器")return response;}, function (error) {// Any status codes that falls outside the range of 2xx cause this function to trigger// Do something with response errorreturn Promise.reject(error);}); 

3.测试：