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到服务端

到此为止问题就解决了。

如有不对,烦请指正

时间: 2024-11-10 00:18:01

fetch默认不携带cookie的相关文章

vue resource 携带cookie请求 vue cookie 跨域(六)

1.依赖VueResource  确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请求都会携带cookie ,也可以指定接口请求携带cookie this.$

iOS-WKWebView携带cookie发送http请求,cookie失效

发送请求代码: NSString *testUrl = @"http://10.22.122.7:8081/test2_action/view_index"; NSURL *url = [NSURL URLWithString:testUrl]; NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy tim

解决Safari高版本浏览器中默认禁用第三方COOKIE(含demo)

前段时间在项目里遇到了一个比较头疼的问题,就是高版本的Safari中默认会阻止第三方cookie,这使得使用Safari浏览器的用户无法按照正常的业务逻辑进行操作. 问题展现 知识点 什么是第三方cookie呢?在访问一个网站A时,网站A算作第一方,如果网站A中引用了另一个网站B(网站B的域名与网站A的域名不同)的资源,这时这个网站B就被认为是第三方.需要注意的是,这儿区分不同网站的标准是域名是否相同,而不是这两个网站是否由同一个公司运营.比如,taobao.com和tmall.com被认为是两

ajax 跨域无法携带cookie 解决办法

ajax 跨域无法携带cookie,需要用到session,终于完美结局 xhrFields: { withCredentials: true }, 添加这个可能是大家都会做的一件事 但是添加上了之后就出现了另外一个问题 The 'Access-Control-Allow-Origin' header contains the invalid value 'Origin'. Origin ...... 2.服务器server端要配置Access-Control-Allow-Credentials

python 携带cookie获取页面内容

有时会遇到爬取的页面需要登录,这就要带上cookie了. 下面记录了几种携带cookie的方法 # coding=utf-8 import requests s = requests.Session() login_data = {'username': 'teacher', 'password': 'teacher'} # 方法1 # resp1 = s.post('http://192.168.2.132/login/', data=login_data) # r = s.get('http

vue resource 携带cookie请求 vue cookie 跨域

vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm install vue-resource --save 在主方法添加 过滤 Vue.http.interceptors.push(function(request, next) {//拦截器 // 跨域携带cookie request.credentials = true; next() }) 以下是针对每个请

重定向如何携带cookie

起因 最近在做微信开放平台,需要给第三方入住,而且入住方都有自己的二级域名.做过微信开发的人都知道,坑爹的是微信并不支持这种二级域名的方式,所以用一个域名专门来处理. 问题 然后由于采用了一个专门的域名来做授权,这样重定向到其它域名时,就会出现不能携带cookie的问题.当然把登录后的参数放到url里可以解决这个问题,但是这样复制出来的url,就会 带有用户的信息了. 解决办法 通过查阅资料发现,如果是相同域名和path,重定向是可以携带cookie的,于是想到了下面的方法. 重定向代理 授权后

【计算机网络】如何让Ajax通信过程携带Cookie呢?

Ajax 1. 介绍一下ajax并代码实现 1.1 基本概念 JavaScript 和XML(Asynchronous JavaScript And XML).简单点说,就是使用 XMLHttpRequest 对象与服务器通信. 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据.AJAX最吸引人的就是它的"异步"特性,也就是说他可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面. Ajax | MDN 1.2 创建一个简单的Ajax 创建 XMLHtt

vue get/post请求如何携带cookie的问题

一: 只需要在main.js中写这三行代码即可 import axios from 'axios' axios.defaults.withCredentials=true;//让ajax携带cookie Vue.prototype.$axios = axios; 如果cookie携带不过去的话,请求响应的时候他会报错显示登陆过期的呦!!! 顺便说一下原生js携带cookie的方法: xhrFields: {               withCredentials: true