axios发送两次请求原因及解决方法
axios发送两次请求原因及解决方法
最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的。
如图:
什么是CORS通信?
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨域通信。详情见:前后分离调用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 !
axios发送两次请求原因及解决方法的更多相关文章
- spring定时任务执行两次的原因与解决方法
spring定时任务,本地执行一次,放到服务器上后,每次执行时会执行两次,原因及解决办法. http://blog.csdn.net/yaobengen/article/details/7031266 ...
- axios发送两次请求问题解决
在使用axios的过程中,会发送两次请求. 看了下是因为有一个请求是OPTIONS来判断跨域的时候让不让发送请求的. 这个不算是一个bug,但是发送两个请求着实让人看着不舒服.于是修改了下,原来的请求 ...
- vue的首页渲染了两次的原因以及解决方法
现在在用vue做一些单页面应用的东西,遇到了些许问题啊,比如我再渲染首页的时候,会渲染两次,查看了一下原因,原来是在写路由的时候写的格式错了: 这样的时候,初始的时候就是加载的exam_list页面, ...
- axios发送post form请求
axios发送post form请求 只需修改url和data即可 axios({ url: '/user', method: 'post', data: { firstName: 'Fred', l ...
- 需要我们了解的SQL Server阻塞原因与解决方法
需要我们了解的SQL Server阻塞原因与解决方法 上篇说SQL Server应用模式之OLTP系统性能分析.五种角度分析sql性能问题.本章依然是SQL性能 五种角度其一“阻塞与死锁” 这里通过连 ...
- Nginx 502 Bad Gateway 错误的原因及解决方法
http://my.oschina.net/zhouyuan/blog/118708 刚才在调试程序的时候,居然服务器502错误,昨天晚上也发生了,好像我没有做非常规的操作. 然后网上寻找了下答案, ...
- Linux的僵尸进程产生原因及解决方法
Linux的僵尸进程产生原因及解决方法: 1. 产生原因: 在UNIX 系统中,一个进程结束了,但是他的父进程没有等待(调用wait / waitpid)他,那么他将变成一个僵尸进程.通过ps命令查看 ...
- 交换机出现err-disable的原因及解决方法
转:https://www.2cto.com/net/201303/198724.html 交换机出现err-disable的原因及解决方法 LOG示例: 21w6d: %ETHCNTR-3-LOOP ...
- (转)ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法
早上同事用PL/SQL连接虚拟机中的Oracle数据库,发现又报了"ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务"错误,帮其解决后,发现很多人遇到过这样的问 ...
随机推荐
- Express的基本使用
前言 列表项目Express是一个简介而灵活的node.js Web应用框架提供的一系列强大特性帮助你创建各种 Web 应用,和丰富的HTTP工具. 正文 一个简单的express框架实例 ``` / ...
- Linux环境下使用dosemu写汇编
本章学习内容是汇编语言,现在直接写汇编的机会不多了,但一定要能读懂,信息安全的核心思维方式“逆向”在这有很好很直接的体现,反汇编就是直接的逆向工程. 所以我在前几天的学习中在Ubuntu环境下安装了可 ...
- HDU3811 Permutation —— 状压DP
题目链接:https://vjudge.net/problem/HDU-3811 Permutation Time Limit: 6000/3000 MS (Java/Others) Memor ...
- 解决ini-parser解析ini文件中文乱码问题
rickyah/ini-parser 是一个.net 平台解析ini文件的库,当ini文件中含有中文字符时会乱码. 解决:将文件通过Editplus 等文本编辑工具保存为 utf-8 + bom 格式 ...
- POJ 2976 Dropping tests:01分数规划【二分】
题目链接:http://poj.org/problem?id=2976 题意: 共有n场考试,每场考试你得的分数为a[i],总分为b[i]. 你可以任意去掉k场考试. 问你最大的 100.0 * ( ...
- html5--2.10综合实例2-移动端页面练习
html5--2.10综合实例2-移动端页面练习 学习要点 通过一个简单的移动手机页面,复习学过的内容 手机网页的测试 手机布局的屏幕设定 手机网页的测试方法 直接在手机上测试,比较麻烦,效果好 电脑 ...
- IDEAL葵花宝典:java代码开发规范插件 checkstyle、visualVM、PMD 插件
前言: visualVM: 运行java程序的时候启动visualvm,方便查看jvm的情况 比如堆内存大小的分配:某个对象占用了多大的内存,jvm调优必备工具. checkstyle: CheckS ...
- capsule network——CNN仅仅考虑了“有没有”的问题,没有考虑feature map的结构关系。这个结构关系包括位置,角度等。Capsule layer的输出也跟feature map的max-pooling输出不同,capsule layer的输出是一个向量,这个向量包含了位置,大小,角度等信息,这是feature map仅能输出一个值所不具备的;训练比较慢
capsule network--<Dynamic Routing Between Capsules> from:https://zhuanlan.zhihu.com/p/31491520 ...
- leetcode 23. Merge k Sorted Lists(堆||分治法)
Merge k sorted linked lists and return it as one sorted list. 题意:把k个已经排好序的链表整合到一个链表中,并且这个链表是排了序的. 题解 ...
- css 3d box 实现的一些注意事项
Test1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...