axios发送两次请求原因及解决方法

小灰灰 2021-11-02 09:26 601阅读 0赞

# axios发送两次请求原因及解决方法 #

最近Vue项目中使用axios组件，在页面交互中发现axios会发送两次请求，一种请求方式为OPTIONS，另外一种为自己设置的。

### 如图： ###

![1149362-20190611135151774-436997497.jpg][]

![1149362-20190611135249349-1988909677.jpg][]

## 什么是CORS通信？ ##

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信。详情见：[前后分离调用API接口跨域问题][API]

## CORS两种请求 ##

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。

> （1) 请求方法是以下三种方法之一：
> 
>  *  HEAD
>  *  GET
>  *  POST
> 
> （2）HTTP的头信息不超出以下几种字段：
> 
>  *  Accept
>  *  Accept-Language
>  *  Content-Language
>  *  Last-Event-ID
>  *  Content-Type：只限于三个值`application/x-www-form-urlencoded`、`multipart/form-data`、`text/plain`

凡是不同时满足上面两个条件，就属于非简单请求。

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是`PUT`或`DELETE`，或者`Content-Type`字段的类型是`application/json`。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的`XMLHttpRequest`请求，否则就报错。

浏览器对这两种请求的处理，是不一样的。

## 两次请求原因 ##

前后端未满足“同源策略/SOP”，俗称请求跨域。浏览器一旦发现请求跨域，就会使用CORS通信，自动添加一些附加的头信息，简单请求只会有一次请求，只有非简单请求会附加一次请求。

## 解决方法 ##

服务期端直接通过“预检”请求，服务器新建拦截器，拦截所有请求，筛选所有Requset Method:OPTIONS的请求，不做任何处理直接返回即可。

## 以下是JAVA设置： ##

package com.yhzy.zytx.jwt.Interceptor;
    
    
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.web.method.HandlerMethod;
    import org.springframework.web.servlet.HandlerInterceptor;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.lang.reflect.Method;
    
    /**
     * @ClassName JwtInterceptor
     * @Description JWT拦截器
     * @Author 天生傲骨、怎能屈服
     * @Date 2019/5/22 13:48
     * @Version 1.0
     */
    public class JwtInterceptor implements HandlerInterceptor {
        
    
        private final static Logger logger = LoggerFactory.getLogger(JwtInterceptor.class);
    
        public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object object) throws Exception {
            // 从 http 请求头中取出 token
            String token = httpServletRequest.getHeader("Authorization");
    
            // 如果不是映射到方法直接通过
            if(!(object instanceof HandlerMethod)){
                return true;
            }
            HandlerMethod handlerMethod=(HandlerMethod)object;
            Method method=handlerMethod.getMethod();
    
            // OPTIONS请求类型直接返回不处理
            if ("OPTIONS".equals(httpServletRequest.getMethod())){
                return false;
            }
            
            return true;
        }
    
        @Override
        public void postHandle(HttpServletRequest httpServletRequest,
                               HttpServletResponse httpServletResponse,
                               Object o, ModelAndView modelAndView) throws Exception {
    
        }
        @Override
        public void afterCompletion(HttpServletRequest httpServletRequest,
                                    HttpServletResponse httpServletResponse,
                                    Object o, Exception e) throws Exception {
        }
    }

完结

希望可以帮到大家，xxxx ！

转载于:https://www.cnblogs.com/itmrzhang/p/11003474.html

[1149362-20190611135151774-436997497.jpg]: /images/20211101/5ccd57bf97414fd48437e5d171950136.png
[1149362-20190611135249349-1988909677.jpg]: /images/20211101/caf1880128c54cc4a59fbaf28586e341.png
[API]: https://www.cnblogs.com/itmrzhang/p/11001069.html