最近在使用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. 我的学习之路_第三十章_servlet

    servlet:小服务程序 servlet是JavaWeb体系中的三大核心(servlet/Filter/Listener)之一,而且是最主要的那个. 作用:接受请求,处理请求,做出响应 继承体系:s ...

  2. Oracle索引批量重置笔记

    ---单个索引重置语句 alter index indexname  rebuild; ---查询数据索引对象语句 select *  from user_indexes; ------将数据库的索引 ...

  3. 阅读MDN文档之布局(四)

    Introducing positioning Static positioning Relative positioning Introducing top, bottom, left and ri ...

  4. 微信小程序简述

    最近在公司实习,经理要求做一个微信小程序,晚上闲时来写一下. 微信小程序问世没多久,但毋庸置疑的是在不久的将来,它可以替代掉很多的APP.个人认为它的优势在于占用资源少,可以做到即用即走,对于一些使用 ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. Linux服务器学习(一)

    一.首先连接服务器 下载一个windows下连接linux的ssh工具,我这里用的putty.一次填入HostName(主机名,可以是服务器域名也可以是对应的ip).Port(端口号默认为22).Co ...

  7. Java多线程缓存器简单实现

    package com.charles.utils; import java.util.HashMap; import java.util.Map; import java.util.concurre ...

  8. java调用wkhtmltopdf生成pdf文件,美观,省事

    最近项目需要导出企业风险报告,文件格式为pdf,于是搜了一大批文章都是什么Jasper Report,iText ,flying sauser ,都尝试了一遍,感觉不是我想要的效果, 需要自己调整好多 ...

  9. 今天提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码!很牛!

    1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击src,新建一个类,命名为MyEclipseGen,把.java里本来有的代码全部删掉,再把下面的代码 ...

  10. 使用maven搭建环境

    今天第一次用maven创建springmvc工程,下载配置都很成功,但用命令行创建项目时遇到一些问题: 1.命令行显示命令不为内部或外部命令: 解决方法:使用管理员模式打开命令行 2. 显示到如下图所 ...