cors跨域请求,重复提交问题
来源:互联网 发布:单页模板网站源码 编辑:程序博客网 时间:2024/06/16 11:27
起因
深夜了,就为了一个bug搞到现在,这个bug是由于axios造成的。
vue-resource不在是官方插件,并且vue官方推荐了axios,所以开始用上了axios,开始并没有发现问题,但今天一次测试中无意间发现了一个大坑。
在使用post发送请求时有10%的几率会发送两次请求。其中一次是正确的post请求,一次是options。看真相
发现问题了吧,Request Headers显示请求时,是Access-Control-Request-Method: POST 但chrome的General中显示的请求确是Request Method:OPTIONS,我在服务气端用$_SERVER[‘REQUEST_METHOD’]查看请求方式也是OPTIONS。
不知道是哪个环节axios抽风了,发送了一个这样的请求。注意,他是额外发送的。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这段代码只执行了一次,但是发出了两个请求,一个是上吗看到的哪个不正常的请求,另一个是正常的post请求。这个抽风的bug我已经提交给官方了。希望官方尽快修复https://github.com/imcvampire/vue-axios/issues/11
结果
其实上面说的是正常现象,并非bug。原因是因为做了跨域提交。在同域下是不会重复提交的。为什么?这个要从cors的跨域请求说起。那是在遥远的过往曾经。。。。编不下去了。看结论
跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站有权限访问哪些资源。另外,规范要求,对那些可能对服务器数据产生副作用的 HTTP 请求方法(特别是 GET 以外的 HTTP 请求,或者搭配某些 MIME 类型的 POST 请求),浏览器必须首先使用 OPTIONS 方法发起一个预检请求(preflight request),从而获知服务端是否允许该跨域请求。服务器确认允许之后,才发起实际的 HTTP 请求。在预检请求的返回中,服务器端也可以通知客户端,是否需要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)。
相关资料https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
那问题怎么结局呢,很简单
- 1
- 2
- 3
- 4
- 5
- 6
当我们遇到OPTIONS请求时只是告诉客户的,我是支持你的。其他什么都不需要做。直接停止。
至于其他请求吗该干啥干啥。上面前三行,其实也可以在web服务器中实现,比如nginx、apache都是可以设定header的。之所以用php去实现,是因为有时候不放变操作服务器配置。所以通过程序实现。
无知很可怕,记住这个教训。下次一定要对问题有个深入的了解,要不然真的是给人家axios官方添堵了
- cors跨域请求,重复提交问题
- cors跨域请求,重复提交问题
- CORS跨域请求问题
- 跨域请求问题 : jsonp & CORS
- 跨域请求CORS
- nginx 重复提交 重复请求问题
- Ajax请求的跨域(CORS)问题
- ASP.NET跨域请求中的问题【CORS】
- ASP.NET跨域请求中的问题【CORS】
- CORS实现跨域请求
- 浅析CORS跨域请求
- http 跨域请求 CORS
- 【fetch跨域请求】cors
- 跨域请求之CORS
- 跨域请求 JSONP & CORS
- cors实现跨域请求
- CORS跨域问题
- 跨域请求解决方法(JSONP, CORS)
- Java学习——对象的序列化和反序列化(自我理解)
- @Valid使用
- 使用jQuery监听扫码枪输入并禁止手动输入的实现方法
- 数据结构实验之查找一:二叉排序树
- mysql命令行查看表结构,字段等信息
- cors跨域请求,重复提交问题
- 国网645协议总结
- java获取指定日期的下一天
- DPDK下如何使用flow director
- BZOJ2820 YY的GCD 莫比乌斯反演
- Android系统编译日常记录
- 单链表(无头)的插、删、查、改等操作以及对应的测试用例
- C# 文件写入(StreamWriter),保存文件对话框(SaveFileDialog)
- WebLogic 12 安装过程