Axios官网:Axios官网
想用Axios前需要在项目中安装axios,安装方式如下:
下列是axios请去方式,本文主要讲解post和get请求,其他请求和这两种请求方法相同。
1 get请求
1.1 不带请求参数
前端
后端
1.2 带请求参数
前端
写法一(推荐)
写法二:
但是这种写法在遇到特殊字符,需要进行处理。不处理的后果如下。(后端接收不到参数)
处理方式
后端
2 post请求
2.1 不带请求参数
前端
后端
2.2 带请求参数
方式一
参数放在请求头,不是很推荐
前端
后端
方式二
参数放在请求体
(post请求第二个就是请求体)
前端
后端
后端需要进行处理,不然接收不到请求参数
处理方式(后端处理)
写法一:
写法二:将接收参数直接封装一个对象
方式三
这种方式和方式二都是将参数放在请求体,但是方式二是后端来进行处理,方式三是前端进行处理,后端不用做处理。
前端
写法一
写法二
后端
方式四
前端
后端
写法一
写法二
3 配置项
在项目中,可能每个请求都要设置请求头或一些其他设置,若在每个请求中都来进行设置,那将十分繁琐。我们可利用下面的配置来进行统一处理。
import axios from 'axios'
// 创建一个新的axios实例
const request = axios.create({
baseURL: 'http://smart-shop.itheima.net/index.php?s=/api',
timeout: 5000
})
一般我们会将配置项,单独抽离到一个文件中,需要用到配置项的文件自行导入
使用
3.1 withCredentials 使用场景
在跨域情况下,后端传给前端的JSESSIONID
通常不会自动保存。
这是因为浏览器的同源策略限制。当进行跨域请求时,浏览器会对跨域的 Cookie 进行严格的限制。默认情况下,浏览器不会自动将跨域响应中的JSESSIONID
保存到本地的 Cookie 中。如果需要
在跨域情况下传递和保存JSESSIONID
,可以采取以下方法:
后端:在后端的响应中添加特定的 CORS 响应头,允许跨域请求携带 Cookie。例如,在 Java Spring Boot 中,可以通过配置WebMvcConfigurer
来实现:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://your-frontend-url.com")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowCredentials(true);
}
}
或在注解上加上allowCredentials
前端 :前端是需要配合处理的
在前端的请求中,确保设置了withCredentials
为true
,以告知浏览器在跨域请求中包含凭证。例如在 Axios 中:
在不跨域的情况下,浏览器通常会自动保存服务器返回的 JSESSIONID
。
4 响应数据
后端返回给前端的数据都在data下面。
5 拦截器
5.1 请求拦截器
可以在这么统一加上请求头token什么的。
// 添加请求拦截器
request.interceptors.request.use(function (config) {
// 在发送请求之前做些什么,
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
5.2 响应拦截器
// 添加响应拦截器
request.interceptors.response.use(
function (response) {
// 对响应数据做点什么
const res = response.data
if (res.status !== 200) {
return Promise.reject(res.message)
}
return res
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
标签:Axios,请求,前端,基础,axios,参数,写法,跨域
From: https://blog.csdn.net/m0_75165868/article/details/142487332