vue-resource get/post请求如何携带cookie的问题
vue-resource get/post请求如何携带cookie的问题
当我们使用vue请求的时候,我们会发现请求头中没有携带cookie传给后台,我们可以在请求时添加如下代码:
vue.http.options.xhr = { withCredentials: true}; 的作用就是允许跨域请求携带cookie做身份认证的;
vue.http.options.emulateJSON = true; 的作用是如果web服务器无法处理 application/json的请求,我们可以启用 emulateJSON 选项;
启用该选项后请求会以 application/x-www-form-urlencoded 作为MIME type, 和普通的html表单一样。 加上如下代码,get请求返回的代码会
携带cookie,但是post不会;
为了方便,我们这边是封装了一个get请求,只要在get请求添加参数 { credentials: true } 即可使用;
const ajaxGet = (url, fn) => {
let results = null;
Vue.http.get(url, { credentials: true }).then((response) => {
if (response.ok) {
results = response.body;
fn(1, results);
} else {
fn(0, results);
}
}, (error) => {
if (error) {
fn(0, results);
}
});
};
如上只会对get请求携带cookie,但是post请求还是没有效果的,因此在post请求中,我们需要添加如下代码:
Vue.http.interceptors.push((request, next) => {
request.credentials = true;
next();
});
Vue.http.interceptors 是拦截器,作用是可以在请求前和发送请求后做一些处理,加上上面的代码post请求就可以解决携带cookie的问题了;
因此我们的post请求也封装了一下,在代码中会添加如上解决post请求携带cookie的问题了;如下代码:
const ajaxPost = (url, params, options, fn) => {
let results = null;
if (typeof options === 'function' && arguments.length <= 3) {
fn = options;
options = {};
}
Vue.http.interceptors.push((request, next) => {
request.credentials = true;
next();
});
Vue.http.post(url, params, options).then((response) => {
if (response.ok) {
results = response.body;
fn(1, results);
} else {
fn(0, results);
}
}, (error) => {
if (error) {
fn(0, results);
}
})
};
vue-resource get/post请求如何携带cookie的问题的更多相关文章
- vue项目使用axios发送请求让ajax请求头部携带cookie
最近做vue项目时遇到登录权限问题,登录以后再发送的请求头部并没有携带登录后设置的cookie,导致后台无法校验其是否登录.检查发现是vue项目中使用axios发送ajax请求导致的.查看文档得知ax ...
- axios请求无法携带cookie
背景 最近在用vue重构公司公司AngularJS 1.X项目,老项目身份认证采用的cookie,前端ajax库采用是angularJS的$http/$resource服务,新版采用的是axios,但 ...
- fetch发送Form Data请求并携带cookie
今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...
- 请求不携带cookie问题
因为后端需要用到cookie做一些判断,所以在post请求前先写入了cookie.在页面未登录时,调接口能带上cookie,登录后的请求没有携带cookie,但是能看到cookie已经保存了. (ax ...
- Cookie默认不设置path时,哪些请求会携带cookie数据
默认不设置path的时候,只会在请求和servlet同路径的情况下才会携带cookie中存储的数据,包含同级目录和下级目录 例如: 在http://localhost:8080/day01/test/ ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
- vue resource 携带cookie请求 vue cookie 跨域(六)
1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.h ...
- vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录
最近想弄一下vue 所以就自己给自己找坑入 结果弄的满身是伤 哈哈哈 首先我说下 前后端分离 跨域请求 我在网上找了一些 可是都是针对于 spring boot 的 我自己还有 securi ...
- Glide请求图片能携带Cookie的哟!
在Web编程中我们都很熟知一个概念,当有了seesion登录状态时,你可以访问一些资源但如果你没有登录的话很多资源是无法访问的. 在android的WebApi中当然一样拥有这个概念.比如,用户的头像 ...
随机推荐
- 【IDEA&&Eclipse】3、IntelliJ IDEA 的 20 个代码自动完成的特性
在这篇文章中,我想向您展示 IntelliJ IDEA 中最棒的 20 个代码自动完成的特性,可让 Java 编码变得更加高效.对任何集成开发环境来说,代码的自动完成都是最最重要的一项功能,它根据你输 ...
- Tests of the Equality of Two Means
Introduction In this lesson, we'll continue our investigation of hypothesis testing. In this case, w ...
- IDEA——错误: 找不到或无法加载主类 com.Main
https://blog.csdn.net/gxx_csdn/article/details/79059884 这篇博客非常赞!
- ionic3用极光推送笔记
安卓 环境:ionic3 + 极光 "jpush-phonegap-plugin": "^3.4.3" "cordova-plugin-jcore& ...
- Spark jdbc postgresql数据库连接和写入操作源码解读
概述:Spark postgresql jdbc 数据库连接和写入操作源码解读,详细记录了SparkSQL对数据库的操作,通过java程序,在本地开发和运行.整体为,Spark建立数据库连接,读取数据 ...
- FI / CO 配置步骤清单
一.FI配置 01. 创建公司代码:企业结构-定义-财务会计-编辑/复制/删除/检查公司代码.编辑公司OX02 02. 创建会计科目表 OB13 03. 定义会计年度变式 OB29 04. 创建信贷控 ...
- Linux 时间及时区设置
时间以及时区设置 by:授客 QQ:1033553122 1.首先确认使用utc还是local time. UTC(Universal Time Coordinated)=GMT(Greenwich ...
- 将mssql数据库高版本迁移到低版本
将mssql数据库高版本迁移到低版本 在低版本目标数据库中创建目标空数据库[TargetDb] ,注意新建数据库即可,不要创建任何表 在低版本数据库中,选中[服务器对象=>链接服务器] 右键[新 ...
- CSS:float: right 靠右换行的解决方法
1.float: right的使用用法:使用html代码<span style="float: right">*****</SPAN>,其中*****就是你 ...
- Windows 系统光盘刻录教程-光盘怎样刻录?刻录数据光盘用"轨道一次写入"还是"光盘一次写入"?
刻录光盘需要 DVD-RW 的光驱,并且光盘需要 DVD-R 的光盘用于刻录.刻录工具可以使用https://cn.ultraiso.net/ 来进行刻录.选择软件目录 中 工具 ,选择 刻录光盘映像 ...