Axios使用教程(一）

文章目录

• Axios
• • 简介
  • 发送网络请求
  • • 异步回调问题
    • 其他请求方式
  • 与vue整合
  • 跨域问题
  • • 解决方法
    • • 简单请求（满足以下条件）
      • 非简单请求（满足以下条件）
      • [在Spring Boot中配置CORS](#在Spring Boot中配置CORS)

Axios

简介

在实际项目开发中，前端页面所需要的数据往往需要从服务器端获取，这必然涉及与服务器的通信。

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

Axios 在浏览器端使用XMLHttpRequests发送网络请求，并能自动完成JSON数据的转换 。

安装：npm install axios

地址：https://www.axios-http.cn/

发送网络请求

• 发送get请求
  

• 发送post请求
  

异步回调问题

async 用于声明一个函数是异步的，而 await 用于等待一个异步操作完成。通过结合这两个关键字，我们可以使 Axios 请求看起来像是同步的。

其他请求方式

https://axios-http.com/zh/docs/api_intro

与vue整合

通过全局配置的方式导入 axios，在main.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获取路径

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注解即可

@CrossOrigin
@RestController
public class CategoryController {
    @Autowired
    private CategoryMapper categoryMapper;

    @GetMapping("/getall")
    @ResponseBody
    public List<Category> getCategory() {
        List<Category> categories = categoryMapper.selectAll();
        return categories;

    }
    }

• 2.增加一个配置类
  全局配置

@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接口即可，其他都不用管，接口调用时，会过滤跨域的拦截。

 @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 {
    }
}