Axios 执行post发送两次请求的小坑
vue-resource2.0已经不再更新,所以vue2.0官方推荐使用axios来代替。
实际项目也是应用上了vue+axios,然后就有了这么一段填坑的经历。
问题:axios使用post请求时,发送了两次,而get则正常。
第一次请求不是正确的post请求,第二次才是正确的
调出谷歌开发者工具
“Request Method: OPTIONS”
什么鬼,post请求时,这里的“Request Method”居然不是post,而是这个OPTIONS。注意:它还是额外发送的。
项目中采用前后端分离的开发方式,前端通过调用后端API实现数据传输。
后端同学则通过反向代理解决了前端跨域的问题。(前端调接口跟在同域下使用时一样,该怎么用怎么用)
找到原因:其实这个情况并非bug,而是当项目中有用到跨域请求时,除了get方式的http请求,都会发送一个预检请求。
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
相关资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_C
解决方案:只能麻烦后端同学帮忙处理下
header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:content-type");
header("Access-Control-Request-Method:GET,POST");
if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){
exit;
}
后端遇到请求方式是“Request Method: OPTIONS” 时,直接返回或退出即可,不再往下执行程序。
上述header的设置用的是PHP的设置方法,在Web服务器端,如nginx, apache也可以对header进行设定。
最新文章
- 刷新或关闭时调用onbeforeunload
- python之购物车的编写(熬夜撸代码中。。。)
- Java IO1:IO和File
- 【转】简单的 Laravel 5 REST API
- python程序的调试方法
- 前端开发中的SEO
- UVA 10298 Power Strings 字符串的幂(KMP,最小循环节)
- Layer 一个让你想到即可做到的web弹窗/层 解决方案
- c语言memset详解
- sdut 6-2 多态性与虚函数
- background-image 与 img 动画性能对比
- Lock(一)认识v$LOCK
- Laravel 源码解读系列第四篇-Auth 机制
- MySQL 性能优化的最佳20多条经验分享(一)(转)
- Myeclipse在debug模式下没加断点程序卡住,start模式下可以正常启动
- Codeforces Round #512 D - Vasya and Triangle
- 第三次spring会议
- python一天一题(2)
- BZOJ4522:[CQOI2016]密钥破解(Pollard-Rho,exgcd)
- 基于Bootstrap的遮罩层,带有加载提示