最近在使用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. Spring HandlerInterceptor

    1.Spring HandlerInterceptor 可以组成一个chain. 这个接口有三个方法: public interface HandlerInterceptor { /** * Inte ...

  2. 微信公众平台——token验证php版

    这几天开始接触微信公众号的开发,注册这些就不说了,我是先弄了个测试号用着.进入正题 所谓token验证,其实就是微信服务器向自己要用到的服务器url发送一段数据,其中有一个参数$_GET['echho ...

  3. springmvc(四) springmvc的数据校验的实现

    so easy~ --WH 一.什么是数据校验? 这个比较好理解,就是用来验证客户输入的数据是否合法,比如客户登录时,用户名不能为空,或者不能超出指定长度等要求,这就叫做数据校验. 数据校验分为客户端 ...

  4. Linux 学习记录 四(Bash 和 Shell scirpt)

    一.什么是 Shell? 狭义的shell指的是指令列方面的软件,包括基本的Linux操作窗口Bash等,广义的shell则包括 图形接口的软件,因为图形接口其实也可以操作各种驱动程序来呼叫核心进行工 ...

  5. nyoj_120: 校园网络

    题目链接 要加边使一个图成为一个强连通分量,只需加max(出度为0的点数,入度为0的点数)条边(可以不使用tarjan算法).题目数据有点弱,网上一些人所谓 结果 = 出度为0的点的数量+入度为0的点 ...

  6. MQ通道搭建以及连通性检查

    场景:项目开发中使用的mq中间件一直不太熟悉,遇到问题就需要问人,公司的同事也不怎么爱搭理,弄的好受伤!不熟悉的时候只是感觉好难,逼的没办法,好好研究下,发现里面的过程也没想象中的难, 经过一番研究, ...

  7. HDOJ2005-第几天?

    Problem Description 给定一个日期,输出这个日期是该年的第几天.   Input 输入数据有多组,每组占一行,数据格式为YYYY/MM/DD组成,具体参见sample input , ...

  8. 关于javacc的认识

    http://www.cnblogs.com/Gavin_Liu/archive/2009/03/07/1405029.html

  9. Thread(线程)四

    今天继续讲讲线程的异常处理.线程取消.多线程的临时变量和线程安全lock的问题. 1.异步处理. 一般来说如果是同步方法的异步处理,我们大多都是try catch住,但是异步方法应该怎么做呢. #re ...

  10. [补档][Jxoi2012] 奇怪的道路

    [Jxoi2012] 奇怪的道路 题目 传送门 :http://www.lydsy.com/JudgeOnline/problem.php?id=3195 小宇从历史书上了解到一个古老的文明.这个文明 ...