解决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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
Vue 组件复用多次自定义参数操作
Jul 27 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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区块查询实现方法分析
2018/05/12 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
学习vue.js中class与style绑定
2016/12/03 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
浅谈Node.js ORM框架Sequlize之表间关系
2017/07/24 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
pyside写ui界面入门示例
2014/01/22 Python
Python基于select实现的socket服务器
2016/04/13 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
教师个人自我评价范文
2014/04/13 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
宣传活动总结范文
2014/07/01 职场文书
房贷收入证明范本
2015/06/12 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫