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, ...
随机推荐
- 优化js脚本设计,防止浏览器假死
在Web开发的时候经常会遇到浏览器不响应事件进入假死状态,甚至弹出"脚本运行时间过长"的提示框,如果出现这种情况说明你的脚本已经失控了,必须进行优化. 为什么会出现这种情况呢,我们 ...
- Struts2框架05 result标签的类型
1 result标签是干什么的 就是结果,服务器处理完返回给浏览器的结果:是一个输出结果数据的组件 2 什么时候需要指定result标签的类型 把要输出的结果数据按照我们指定的数据类型进行处理 3 常 ...
- HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog(二分图最大匹配)
HDU 3829 Cat VS Dog / NBUT 1305 Cat VS Dog(二分图最大匹配) Description The zoo have N cats and M dogs, toda ...
- 基于layUI实现前端分页功能
一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为htt ...
- (转)mq经验总结-转
场景:学习mq相关的知识,发现这是一篇总结性很强的文章,转过来学习学习! 1 mq经验总结 首先了解什么是mq?mq的作用是什么? mq是通讯中间件.他的作用是省去开发人员开发通讯工具的时间,节省开发 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- Python学习记录----语法学习
一控制语句 http://blog.csdn.net/lynn_yan/article/details/5464911 if 语句 二 字典详解 http://blog.csdn.net/moodyt ...
- 如何修改script.bin/script.fex
你是否经常看见其他帖子里或者其他人提到要修改script.bin或script.fex ,但你又不知道怎么改. 其实 script.bin就是script.fex通过 fex2bin生成的,scrip ...
- yii2 队列 shmilyzxt/yii2-queue 简介
在yii2论坛中看到一个关于队列的帖子,感觉不错.http://www.yiichina.com/extension/1084 (注:SendMail 错写为 SendMial,粘贴时要注意了.) 在 ...
- 你可能需要为你的APP适配iOS11
WeTest 导读 iOS 11 为整个生态系统的 UI 元素带来了一种更加大胆.动态的新风格. 本文介绍了iOS11在UI方面做了哪些更新,有些更新可以为用户提供更加完美的体验,但也有的可能会给目 ...