解决vue axios跨域 Request Method: OPTIONS问题(预检请求)


Posted in Javascript onAugust 14, 2020

我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求

如下图

解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

options请求

解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

get请求

为什么会出现这种原因呢?

这是因为CORS跨域分为 简单跨域请求和复杂跨域请求;

简单跨域不会发送options请求,复杂跨域会发送一个预检请求options。

1.简单跨域满足的条件

1.请求方式是以下三种之一:

HEAD

GET

POST

2.HTTP的头信息不超出以下几种字段

Accept

Accept-Language

Content-Language

Last-Event-ID

Content-Type

但是Content-Type的值,只限于三个值:

application/x-www-form-urlencoded、multipart/form-data、text/plain

2.复杂跨域满足的条件

1.请求方法不是GET/HEAD/POST

2. post请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

3.请求设置了自定义的header字段

在header中自定义了字段就会触发options预检请求

// 请求拦截器
service.interceptors.request.use(
 config => {
 if (store.getters.token) {
 config.headers['Content-MD5'] = 'MD5'
 config.headers['authToken'] = getToken()
 config.headers['accessTokenRetireTime'] = getTokenTime()
 }

 return config
 },
 error => {
 console.log(error) // for debug
 return Promise.reject(error)
 }
)

3.解决方案

1.可以通过跟后端协调,将所有options放行,此时便能通过post/get请求访问到数据。

2.引入qs模块处理数据

qs.parse()将URL解析成对象的形式

qs.stringify()将对象 序列化成URL的形式,以&进行拼接

1.安装qs

npm install qs

2.在main.js引入qs

import qs from 'qs';

Vue.prototype.$qs = qs;

3.vue实例组件里都可以直接用this.$qs.stringify(要处理的数据),进行数据转换

个人倾向第一种方法,如果用第二种方法对前后端来说比较繁琐。

补充知识:vue当中axios调取后台数据 以及设置自定义请求头

从vue2.0开始vue-resource就不再维护了,尤大大开始推荐使用 axios。 具体详细教程可在官网查阅,这篇文章主要说明一些简单的问题。

第一步:安装axios

$ npm install axios

第二步:在 main.js中引入axios

解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

第三步:设置我们自定义的 头请求;

header也可以在我们具体的请求中添加 header参数,我们这里是在main.js中添加公众的。

axios.defaults.timeout = 5000;

//请求超时的时间设定

axios.defaults.headers.post['Content-Type'] = 'application/json';

//axios默认的请求方式,可以自己设置

axios.defaults.baseURL = 'http://localhost:8008';

//axios默认的请求地址,开发时可以实际的接口地址来设置该值,去请求别人的接口(前提是后台已经帮你解决了接口的跨域问题,如果没有,请看下文,我们自己可以解决开发跨域的问题)

axios.defaults.headers.common["token"] = "aaaaaaaaaaa";

这块token呢是因为当初调试接口的时候 有些接口必须登录才可以调用,而我们的登陆注册并未写好,因此 后台给了一个故固定的token,然后写在了头里面。

以上这篇解决vue axios跨域 Request Method: OPTIONS问题(预检请求)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 #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
You might like
php 启动时报错的简单解决方法
2014/01/27 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript定义函数的方法
2010/12/06 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python实现购物程序思路及代码
2017/07/24 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
《在大海中永生》教学反思
2014/02/24 职场文书
入股协议书范本
2014/04/14 职场文书
天猫活动策划方案
2014/08/21 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
新员工入职欢迎词
2015/01/23 职场文书
2015年宣传工作总结
2015/04/08 职场文书
导游词之无锡古运河
2019/11/14 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript