解决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 相关文章推荐
不懂JavaScript应该怎样学
Apr 16 Javascript
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
Cookie 小记
Apr 01 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
js获取内联样式的方法
Jan 27 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
php关联数组快速排序的方法
2015/04/17 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
编辑浪子版表单验证类
2007/05/12 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python的CGIHTTPServer交互实现详解
2018/02/08 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
工作自荐信
2013/12/11 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
幼儿园标语大全
2014/06/19 职场文书
中职毕业生自我鉴定
2014/09/13 职场文书
买房协议书范本
2014/10/23 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL