解决在Vue中使用axios POST请求变成OPTIONS的问题


Posted in Javascript onAugust 14, 2020

POST请求变成OPTIONS

解决在Vue中使用axios POST请求变成OPTIONS的问题

及报错信息(跨域)

解决在Vue中使用axios POST请求变成OPTIONS的问题

主要解决方案:使用qs.stringify

1、安装qs

npm install qs --save

2、axios配置和使用

在接口请求页面引入安装好的qs,如下图:

解决在Vue中使用axios POST请求变成OPTIONS的问题

引入完成之后使用qs改变传递的参数data,如下:

解决在Vue中使用axios POST请求变成OPTIONS的问题

这样就可以了,post请求的时候就不会再出现OPTIONS了

解决在Vue中使用axios POST请求变成OPTIONS的问题

补充知识:axios发起请求,为什么先发送options请求,再发送get/post请求

引起原因

1,跨域;

2,请求头非默认情况。

默认请求头如下

Accept
Accept-Language
Content-Language
Last-Event-ID

Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

通常情况下,会将content-Type:application/json;

axios中content-Type默认是application/json;所以在使用axios跨域发请求时,会触发options预请求。

以上这篇解决在Vue中使用axios POST请求变成OPTIONS的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
JavaScript数组实现数据结构中的队列与堆栈
May 26 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
js实现自动锁屏功能
Jun 02 Javascript
Vue的Options用法说明
Aug 14 #Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 #Javascript
vue 扩展现有组件的操作
Aug 14 #Javascript
如何HttpServletRequest文件对象并储存
Aug 14 #Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 #Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 #Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 #Javascript
You might like
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
php使用str_replace替换多维数组的实现方法分析
2017/06/15 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
JavaScript 字符串与数组转换函数[不用split与join]
2009/12/13 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
vue-axios使用详解
2017/05/10 Javascript
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
使用webpack3.0配置webpack-dev-server教程
2018/05/29 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
Python中的is和id用法分析
2015/01/26 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python中的错误处理
2016/04/10 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
如何用Python合并lmdb文件
2018/07/02 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
详解Python字典的操作
2019/03/04 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
大学生家政服务项目创业计划书
2014/01/30 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
远程教育学习心得体会
2016/01/23 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android