fetch默认不携带cookie
最近在使用fetch向服务器发送请求,过程中的体会和遇到的问题在这里记录一下。
fetch返回的是一个Promise对象,我们可以对返回的结果做进一步的处理,这是与传统ajax的一个区别。
简单的请求写法如下:
fetch(url)
.then(res => res.json())
.then(json => {
console.log(json);
})
也可以设置method、headers、body等参数,详见fetch api。
----------------------------------------------------------------------------------------------
接下来主要是关于fetch的一个坑,那就是fetch默认不会携带cookie。
我们在做判断用户是否已登录等权限问题的时候,有一种做法(这里以express-session为例)是用户登录时将信息存入session
req.session.user = user;
此时,服务端会发送给客户端相应的cookie
之后,来自客户端的每一个请求,都会带有这个cookie
而服务端通过这个cookie得到req.session.user(如果没有cookie,那么req.session.user === undefined),便可判断用户是否已登录
if (!req.session.user) {
console.log("未登录");
}
使用fetch发送请求的我就这样掉坑里了。
想要解决这个问题其实很简单,那就是在参数里加一个字段credentials: true,如:
fetch(url, {
method: 'GET',
credentials: 'include'
})
这样,在一般情况下应该是没问题了,没错,还有特殊情况,那就是跨域。
如果我们进行的是跨域请求而且是用CORS(对CORS不了解的可以看看这个)来处理的,那么我们就需要在服务端设置一些字段,比如:
'Access-Control-Allow-Origin', 'http://localhost:8080', // 不能使用*,必须指定域名,大概是出于安全考虑 'Access-Control-Allow-credentials', 'true' // 表示允许发送cookie到服务端
到此为止问题就解决了。
如有不对,烦请指正
fetch默认不携带cookie的更多相关文章
- fetch发送Form Data请求并携带cookie
今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...
- Cookie默认不设置path时,哪些请求会携带cookie数据
默认不设置path的时候,只会在请求和servlet同路径的情况下才会携带cookie中存储的数据,包含同级目录和下级目录 例如: 在http://localhost:8080/day01/test/ ...
- 携带cookie进行数据请求
前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie ...
- python urllib2模块携带cookie
今天干活遇到一个事.有一些网站的一些操作非得要求你登陆才能做,比如新浪微博,你要随便看看吧,不行,非得让你登陆了才能看,再比如一些用户操作,像更改自己的资料啦,个人的隐私啦巴拉巴拉的.想抓取这样的ur ...
- 关于 Angular 跨域请求携带 Cookie 的问题
在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...
- vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录
最近想弄一下vue 所以就自己给自己找坑入 结果弄的满身是伤 哈哈哈 首先我说下 前后端分离 跨域请求 我在网上找了一些 可是都是针对于 spring boot 的 我自己还有 securi ...
- 请求不携带cookie问题
因为后端需要用到cookie做一些判断,所以在post请求前先写入了cookie.在页面未登录时,调接口能带上cookie,登录后的请求没有携带cookie,但是能看到cookie已经保存了. (ax ...
- axios请求无法携带cookie
背景 最近在用vue重构公司公司AngularJS 1.X项目,老项目身份认证采用的cookie,前端ajax库采用是angularJS的$http/$resource服务,新版采用的是axios,但 ...
- axios 跨域携带cookie设置
import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, ...
随机推荐
- shell十分钟教程
1.先介绍下shell的工作原理 Shell可以被称作是脚本语言,因为它本身是不需要编译的,而是通过解释器解释之后再编译执行,和传统语言相比多了解释的过程所以效率会略差于传统的直接编译的语言. 但是s ...
- JavaScript一个google地图获取
<script type="text/javascript"> /** * 返回一个新创建的<img>元素,该元素用于在获取到地理位置信息后,显示一张Goo ...
- Android系统--输入系统(十五)实战_使用GlobalKey一键启动程序
Android系统--输入系统(十五)实战_使用GlobalKey一键启动程序 1. 一键启动的过程 1.1 对于global key, 系统会根据global_keys.xml发送消息给某个组件 & ...
- C#常用8种排序算法实现以及原理简介
public static class SortExtention { #region 冒泡排序 /* * 已知一组无序数据a[1].a[2].--a[n],需将其按升序排列.首先比较a[1]与a[2 ...
- SSH连不上虚拟机的问题解决
这几天工作任务不重,今早上班打算在liunx下运行下python脚本.打开VM,SSH突然连不上虚拟机了.网上试了很多方法都不行,最后花费2个小时解决了这一问题. 结合我的实际情况,问题解决如下: 1 ...
- 51nod_1122:机器人走方格 V4 (矩阵快速幂)
题目链接 昨天上随机信号分析讲马氏链的时候突然想到这题的解法,今天写一下 定义矩阵A,Ans=A^n,令A[i][j]表示,经过1次变换后,第i个位置上的机器人位于第j个位置的情况数,则Ans[i][ ...
- (转)maven打包时跳过测试
1 运行mvn install时跳过Test 1.1 方法一 <project> [...] <build> <plugins> <plugin> &l ...
- JavaScript系统学习小结——Object类型、Array类型
今天学习JavaSript中引用变量中的Object类型和Array类型: 1. Js中大多数引用类型值都是Object类型的实例,Object类型在应用程序中存储和传输数据时,是非常理想的选择: 创 ...
- 使用Fiddler调试手机端页面请求/抓包
简介 Fiddler作为一个强大的抓包工具,也是非常强大的http(s)协议分析工具,我们通常用它跟踪请求,PC端使用这里暂不做介绍(这里前提是熟悉PC端的使用),使用很简单. 那么我们如何来用它来跟 ...
- 用vue写添加数据、删除数据、筛选数据表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...