axios发送POST时请求两次,第一次为OPTIONS
出现问题:
发送POST请求时浏览器产生两次请求,第一次为OPTIONS,第二次是真正的POST请求,后台接收不到参数。

查找原因:
非GET请求,会先发送OPTIONS进行预检(预检请求每次运行只发生一次)致使后台接收不到参数值,不停返回参数错误。
于是找到了原因:

查找解决方案:
CORS文档:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
解决方案:(可行)
改为简单请求(使用form格式提交数据)
//用户注册
var url ="/api/OfferReward/User/ValidateCode";
var instance = axios.create({ headers:
{'content-type': 'application/x-www-form-urlencoded;charset=UTF-8'}
});
instance.post(url,qs.stringify(tel)).then(res => {
if(res.status === 200){
if (res.data.status === 0) {
console.log(res.data.msg);
} else {
console.log(res.data.msg);
return false;
}
}
})
不可行的一种测试:
前端接收后台对OPTIONS请求的响应,忽略过滤它。也不能修改OPTIONS的status值,如果不为200则预检请求不通过,后续所有POST接口都无法请求成功。
从返回值拦截不成功,那就只能从根源上解决,使用简单请求避免出现OPTIONS,用表单格式提交。据查,简单请求还有一定的限制,暂时没有遇到。
axios发送POST时请求两次,第一次为OPTIONS的更多相关文章
- axios发送post form请求
axios发送post form请求 只需修改url和data即可 axios({ url: '/user', method: 'post', data: { firstName: 'Fred', l ...
- Nuxt服务端使用Axios调用接口时传递cookies
个人博客 地址:http://www.wenhaofan.com/article/20190321183709 介绍 在做单点登录时,后端需要根据cookie获取登录用户,由于前端项目使用了Nuxt做 ...
- jquery easyui的datagrid在初始化的时候会请求两次URL?
我们项目前端用的是jquery easyui,刚开始使用datagrid加载列表初始化时总是请求两次URL,这让人非常不解,怎么总是请求两次呢?数据一多,加载速度明显变慢,通过查资料才知道原来是重复声 ...
- vue使用axios发送请求,都会发送两次请求
vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...
- axios发送两次请求原因及解决方法
axios发送两次请求原因及解决方法 最近Vue项目中使用axios组件,在页面交互中发现axios会发送两次请求,一种请求方式为OPTIONS,另外一种为自己设置的. 如图: 什么是CORS通信? ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- vue2.0项目实战(3)使用axios发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- Vue笔记:使用 axios 发送请求
在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource. 关于为什么放弃推荐? -> 尤 ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
随机推荐
- hdu3917 最大权闭合图
题意:有N个城市,M个公司.现在需要建立交通是获得的利益最大.如果2个公司A,B, A修的路为Xa->Ya,B的路为Xb->Yb,如果Ya==Xb,那么这2个公司有关系. 对于每个公司都有 ...
- More Effective C++: 06杂项讨论
32:在未来时态下发展程序 世事永远在变,好的软件对于变化有良好的适应能力:可以容纳新的性质,可以移植到新的平台,可以适应新的需求,可以掌握新的输入.所谓在未来时态下设计程序,就是接受“事情总会改变” ...
- More Effective C++: 03异常
C++的异常机制使得程序付出某些代价:资源泄漏的可能性增加了:写出具有你希望的行为的构造函数与析构函数变得更加困难:执行程序和库程序尺寸增加了,同时运行速度降低了等等. 但是为什么使用异常呢?C程序使 ...
- bzoj2073 PRZ
Description 一只队伍在爬山时碰到了雪崩,他们在逃跑时遇到了一座桥,他们要尽快的过桥. 桥已经很旧了, 所以它不能承受太重的东西. 任何时候队伍在桥上的人都不能超过一定的限制. 所以这只队伍 ...
- 国外最受欢迎的十大社交APP网站
国外最受欢迎的十大社交APP网站 2016-11-01 09:34悠悠国外网 有哪些好的国外社交软件你知道吗,想使用国外流行的社交应用来体验不一样的社交么,想和外国友人交朋友么.本期悠悠国外网 ...
- python系列之(4)豆瓣图书《平凡的世界》书评及情感分析
本篇主要是通过对豆瓣图书<平凡的世界>短评进行抓取并进行分析,并用snowNLP对其进行情感分析. 用到的模块有snowNLP,是一个python库,用来进行情感分析. 1.抓取数据 我们 ...
- IDEA-servlet项目创建web项目
准备:1. 安装jdk1.82. 安装tomcat9.0(idea只支持4.0 9.0的服务器) 一.创建并设置javaweb工程 1.创建javaweb工程File --> New --&g ...
- python 解释器编码
- sql —— like
用于在 WHERE 子句中搜索列中的指定模式. 原表: 一.% %表示任何字符出现任意次数. 1.以某个字符串开头的数据 2.包含某个字符串的数据 3.以某个字符串结尾的数据 二._ 只适用于匹配单个 ...
- javascript简介 标签: javascript 2015-11-13 12:13 1712人阅读 评论(39)
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...