解决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 相关文章推荐
基于jQuery的动态表格插件
Mar 28 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
javascript实现textarea中tab键的缩排处理方法
Jun 26 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 Javascript
微信小程序实现点赞业务
Feb 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生成静态页面详解
2006/12/05 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
JavaScript简单实现鼠标移动切换图片的方法
2016/02/23 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
python实现360皮肤按钮控件示例
2014/02/21 Python
python计算对角线有理函数插值的方法
2015/05/07 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
使用数据结构给女朋友写个Html5走迷宫游戏
2019/11/26 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
Java servlet面试题
2012/03/04 面试题
大学生期末自我鉴定
2014/02/01 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
2014公司年终工作总结
2014/12/19 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
史上最牛辞职信
2015/05/13 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
JavaScript ES6的函数拓展
2022/01/18 Javascript