最近在使用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的更多相关文章

  1. fetch发送Form Data请求并携带cookie

    今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...

  2. Cookie默认不设置path时,哪些请求会携带cookie数据

    默认不设置path的时候,只会在请求和servlet同路径的情况下才会携带cookie中存储的数据,包含同级目录和下级目录 例如: 在http://localhost:8080/day01/test/ ...

  3. 携带cookie进行数据请求

    前端进行数据请求有:普通的ajax(json)请求,jsop跨域请求,cors跨域请求,fetch请求...PC端这些请求方式中,普通的ajax(json)请求和jsop跨域请求是默认携带cookie ...

  4. python urllib2模块携带cookie

    今天干活遇到一个事.有一些网站的一些操作非得要求你登陆才能做,比如新浪微博,你要随便看看吧,不行,非得让你登陆了才能看,再比如一些用户操作,像更改自己的资料啦,个人的隐私啦巴拉巴拉的.想抓取这样的ur ...

  5. 关于 Angular 跨域请求携带 Cookie 的问题

    在前端开发调试接口的时候都会遇到跨域请求的问题.传统的方式是使用 Nginx 反向代理解决跨域.比如所有接口都在 a.com 的域下,通过 Nginx 将所有请求代理到 a.com 的域下即可. 使用 ...

  6. vue + spring boot + spring security 前后端分离 携带 Cookie 登录实现 只写了个登录

    最近想弄一下vue 所以就自己给自己找坑入   结果弄的满身是伤 哈哈哈 首先我说下 前后端分离  跨域请求  我在网上找了一些  可是都是针对于 spring boot 的 我自己还有 securi ...

  7. 请求不携带cookie问题

    因为后端需要用到cookie做一些判断,所以在post请求前先写入了cookie.在页面未登录时,调接口能带上cookie,登录后的请求没有携带cookie,但是能看到cookie已经保存了. (ax ...

  8. axios请求无法携带cookie

    背景 最近在用vue重构公司公司AngularJS 1.X项目,老项目身份认证采用的cookie,前端ajax库采用是angularJS的$http/$resource服务,新版采用的是axios,但 ...

  9. axios 跨域携带cookie设置

    import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, ...

随机推荐

  1. 交叉编译 tesseract

      官方参考资料说明: tesseract 依赖库: (https://github.com/tesseract-ocr/tesseract/wiki/Compiling#linux) leptoni ...

  2. HDU 1728 逃离迷宫(DFS)

    题目网址:http://acm.hdu.edu.cn/showproblem.php?pid=1728 题目: 逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)  ...

  3. 记一次 联想杨天A4600K 安装操作系统遇到的尴尬

    故事的开始: 某日,有一台联想扬天A4600K台式机,该机器原来使用的系统为windowsXP,先需要安装win7系统. 准备好gho镜像,准备ghost安装系统.不料,提示镜像文件损坏,无法安装.起 ...

  4. 线程池与Threadlocal

    线程池与Threadlocal 线程池: 线程池是为了使线程能够得到循环的利用,线程池里面养着一些线程,有任务需要使用线程的时候就往线程池里抓线程对象出来使用.线程池里的线程能够重复使用,所以在资源上 ...

  5. AddBinary

    二进制加法 输入2个字符串,字符串内由0和1组成:计算二者之和,返回字符串 Given two binary strings, return their sum (also a binary stri ...

  6. Java集合类小结-思维导图

    java集合类分为collection 和 map两类Collection List ArrayList LibnkedList Vector Set HashSet TreeSet LinkedHa ...

  7. maven-编译速度优化

    故障描述: 公司搭建了一个新jenkins持续集成环境,jenkins构建job时间越来越长. 原因分析: 系统CPU限制:判断依据,构建中查看日志 tail -f /var/log/messages ...

  8. 二.GC相关之Java内存模型

    根据上节描述的问题,我们知道其最终原因是GC导致的.本节我们就先详细探讨下与GC息息相关的Java内存模型. 名词解释:变量,理解为java的基本类型.对象,理解为java new出来的实例. Jav ...

  9. [补档] 大假期集训Part.1

    新博客搭起来先补一发档... 那就从大假期集训第一部分说起好了QwQ 自己还是太菜掉回了2016级水平 day1: day1的时候来得有点晚(毕竟准高一)然后进机房发现早就开考了还没有给我题面于是搞了 ...

  10. ETL作业自动化调度软件TASKCTL4.5安装程序是选项解释

    下文仅针对TASKCTL4.5有效,在执行安装程序后,会看到安装程序有4个选项,其中,1和2是需要了解的. 1, 典型安装: 这个选项是单机部署,在第一次使用TASKCTL的时候,我用的是这种安装方式 ...