文章目录
- Axios
-
- 简介
- 发送网络请求
- 与vue整合
- 跨域问题
-
- 解决方法
-
- 简单请求（满足以下条件）
- 非简单请求（满足以下条件）
- [在Spring Boot中配置CORS](#在Spring Boot中配置CORS)
Axios
简介
在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
Axios 在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换 。
安装：npm install axios
发送网络请求
-
发送get请求
-
发送post请求
异步回调问题
async 用于声明一个函数是异步的，而 await 用于等待一个异步操作完成。通过结合这两个关键字，我们可以使 Axios 请求看起来像是同步的。
其他请求方式
https://axios-http.com/zh/docs/api_intro
与vue整合
通过全局配置的方式导入 axios，在main.js中配置
js
import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL = 'http://api.com
//将axios作为全局的自定义属性,每个组件可以在内部直接访问(Vue3)
app.config.globalProperties.Shttp = axios
//将axios作为全局的自定义属性,每个组件可以在内部直接访问(Vue2)
Vue.prototype.$http = axios在任意组件中可以使用this.$http获取路径
js
created:function(){
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将请求分为两类：简单请求和非简单请求，分别对跨域通信提供了支持。
简单请求（满足以下条件）
请求方法：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-Heaaders:真实请求允许的方法、允许使用的字段
Access-Control-Allow-Credentials:是否允许用户发送、处理cookie
Access-Control-Max-Age:预检请求的有效期,单位为秒,有效期内不会重复 发送预检请求。
当预检请求通过后，浏览器才会发送真实请求到服务器。这样就实现了跨域资
源的请求访问。
在Spring Boot中配置CORS
- 1.注解形式
简单粗暴的方式，Controller层在需要跨域的类或者方法上加上@CrossOrigin注解即可
java
@CrossOrigin
@RestController
public class CategoryController {
@Autowired
private CategoryMapper categoryMapper;
@GetMapping("/getall")
@ResponseBody
public List<Category> getCategory() {
List<Category> categories = categoryMapper.selectAll();
return categories;
}
}- 2.增加一个配置类
全局配置
java
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")//允许跨域访问的路径
.allowedOrigins("*") //允许跨域访问的源
.allowCredentials(true) //是否发送cookie
.allowedHeaders("*")//允许头部设置
.allowedMethods("POST","GET","PUT","OPTIONS","DELETE")// 允许请求方法
.maxAge(3600);//预检间隔时间
}
}- 3.采用过滤器（filter）的方式
增加一个CORSFilter 类，并实现Filter接口即可，其他都不用管，接口调用时，会过滤跨域的拦截。
java
@Component
public class CORSFilter implements Filter {
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
HttpServletResponse res = (HttpServletResponse) response;
res.addHeader("Access-Control-Allow-Credentials", "true");
res.addHeader("Access-Control-Allow-Origin", "*");
res.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");
res.addHeader("Access-Control-Allow-Headers", "Content-Type,X-CAF-Authorization-Token,sessionToken,X-TOKEN");
if (((HttpServletRequest) request).getMethod().equals("OPTIONS")) {
response.getWriter().println("ok");
return;
}
chain.doFilter(request, response);
}
@Override
public void destroy() {
}
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
}