大家好，今天来为大家解答谷歌浏览器跨域cookie这个问题的一些问题点，包括谷歌浏览器跨域怎么设置也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

本文目录

1. 深入理解cookie
2. 如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器
3. cookie在多域名下的跨域解决办法
4. 2021-07-21 前端跨域携带cookie问题
5. 跨域请求如何携带cookie不小心都拿了Offer

一、深入理解cookie

1、学校门口有家饭店味道不错，小明去吃了一次，确实味道不错，这周小明又去这家饭店吃饭，结账时，小明说：”我上周来过，这是第二次了，能不能打个折？“。老板说：”你来过？我不记得啊（无状态）“。小明表示很生气，明明来过老板竟然不记得。老板想了个法子，给小明发了张卡片（cookie），上面写着小明的信息，下次小明拿着卡片来老板就认识了。

2、回到正题，cookie用在http请求中，而http是无状态协议，它的每个请求都是完全独立的，服务端无法判别用户状态，cookie用来告诉服务端用户的状态信息。客户端用户第一次发送请求给服务端时，服务端在返回的响应中发给用户一个cookie，里面记录了用户的信息，下次用户再发送http请求给服务端时，会携带上cookie，服务端检查cookie获取用户的状态信息。

3、 cookie的内容主要是服务端写入的，由客户端存储在本地，cookie其实是以字符串的形式存储的。打开谷歌开发者工具的Application中的Cookie，可以看到cookie具有以下字段

4、 cookie以键值对的形式存储用户数据

5、不同域名是无法操作彼此cookie的，而且必须满足path一样或者是其子路径才能相互访问彼此的cookie。

6、 domain用来设置可以使用cookie的域名，如果想让一级域名下的两个二级域名都能使用cookie，例如imag.baidu.com和www.baidu.com，可以设置domain为baidu.com，但不能设置为.com，这样两个二级域名都能使用。path属性设置允许使用cookie的路径，例如设置为根路径"/"，表示允许根路径以及根路径下的所有子路径都可以使用cookie

7、所以domain和path共同决定了cookie能否被浏览器自动添加到请求头部中发送出去。如果没有设置这两个选项，则会使用默认值。domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。

8、此外，如果是跨域请求，例如XMLHttpRequest请求，默认是不会自动携带cookie的。

9、 cookie的过期时间，Expires是具体日期，Max-Age是一段时间

10、 cookie的大小，一般是4k，此外cookie的个数也有限制，不同浏览器cookie的个数限制不同

11、该cookie数据是否只用来在http请求中传递，默认为false，如果设置该字段为true，客户端无法用js访问或者操作该cookie，这条cookie信息不会出现在document.cookie的字符串中。

12、默认为false，设置该字段为true则该cookie不会携带在http协议的请求中，只能携带在安全的https协议请求中

13、当网页要发http请求时，浏览器会先检查是否有相应的cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。这个特点很重要，因为这关系到“什么样的数据适合存储在cookie中”。

14、因为每次浏览器发送http请求都会自动携带cookie，会增加网络开销，所以最好只存放每次请求都需要发送给服务端的数据，比如身份认证信息。

15、客户端使用js设置 cookie，客户端可以设置cookie的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie才能成功），但无法设置HttpOnly选项。document.cookie可以获取cookie字符串，也可以设置cookie。

16、 document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/";

17、值得注意的是，浏览器提交Cookie时只会提交name和value属性，maxAge属性只被浏览器用来判断Cookie是否过期。

18、当要设置多个cookie时，必须重复设置document.cookie="key=name"。

19、要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie保持一样。否则不会修改旧值，而是添加了一个新的 cookie。删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但要注意，path/domain/这几个选项一定要旧cookie保持一致。

20、服务端的response header中有一项叫set-cookie，是服务端专门用来设置cookie的。

二、如何使用iframe实现跨域写入cookie 并且兼容大部分浏览器

请首先修改hosts文件来模拟本机跨域

由a.com登录，如果登录成功，就生成a.com的cookie。而对于b.com则无需再次登录。

浏览器同源策略限制，即A站点页面的脚本是无法直接操纵B站点的内容。

试想如果所有第三方网站都可以对taobao.com的首页任意篡改，那这个社会还有什么安全性可言呢？

其实浏览器的安全策略逻辑很简单，就是我的地盘我做主，出了我的地盘我做不了主。

a.com根据用户输入操作a.com的cookie，b.com根据用户在a.com得到的输入数据来操作b.com的cookie。

如何在a.com用户输入a.com的用户数据时同时提交到b.com的验证页面呢？

<form method="post" action="<?php print$b?>setcookie.php" target="ifrm"><fieldset>

<legend>跨域获取cookie</legend>

<input type="text" id="username" name="username"/>

<p><button onclick="login()" type="submit">Login</button></p>

<iframe id="ifrm" name="ifrm" style="display:none;" src="<?php print$b?>setcookie.php"/>

请注意form表单的相关属性，b.com/setcookie.php页面就是验证a.com用户的输入然后生成b.com的cookie，这样后续访问b.com无需再次输入用户名和密码。

需要先设置跨域站点的cookie然后再来设置本域的cookie；

如果跨域站点请求耗时较长，直接影响本域的操作时间；

另外也需要额外的代码来处理跨域站点请求失败后的操作

IE中需要设置接受cookie（隐私），这一点比较不方便。

4）点击a.com/default.php下面的链接就可以在b.com/getcookie.php看到b.com的cookie

三、cookie在多域名下的跨域解决办法

用户登录成功后，服务端生成token，并保存在cookie里。http的cookie机制解决了http请求的无状态，短连接的特性，前端后续的请求都不需要传token或密码，就可以实现权限的认证。

但是方便的同时，跨域和同源的问题随之而来。

不是同源，cookie是不能读写的。（这里的同源是指相同的协议，主机，端口；只要其中任何一项不相等，就不是同源。）（三级域名abc.xx.com与二级域名 xx.com是同源吗？）

后端cors配置相应前端的域名，允许跨域访问。后端的域名是meng.abc.com,前端的域名是m.abc.com。因为是同源，cookie读写正常。

2、多个前端域名，访问同一个后端服务的情况

现在增加了两个前端域名，m.51.com, m.xx.com。如下图所示，即使配置跨域的域名，但是也解决不了cookie读写的同源问题！！

3、多个前端域名，分别访问多个后端服务的情况

因为同源的特性，需要针对每个前端域名，分别对应一个后端域名。如下图所示，解决cookie的同源正常读写问题。

备注：这里就不详细讲解跨域的解决方案。上述，只要是前后端分离，都需要配置跨域的cors的二级域名。

spring.domain=abc.com;51.com;xx.com

spring.corsOrigins=

后期可能优化的地方：把token存储在localstorage等地方，通过http header传递到服务器验证，不要使用http cookie机制，好处既能避开crsf跨站攻击，又能解决同源的跨域问题。

四、2021-07-21 前端跨域携带cookie问题

1、Access-Control-Allow-Origin为*的时候，前端设置withCredentials：true，将不能发送cookie到服务端。

2、此外，前端要发送cookie到服务端，还要 XMLHttpRequest的 withCredentials标志设置为 true，且

3、服务器端的响应中未携带 Access-Control-Allow-Credentials: true。

4、 XMLHttpRequest的 withCredentials标志设置为 true，是为了客户端向服务端发送cookie，

5、响应中Access-Control-Allow-Credentials: true，是为了客户端能够接收cookie，无此标记，浏览器将不会把响应内容返回给请求的发送者。

6、因此，前端要携带cookie到服务端，需要三个条件：

7、新标准中提供了文档之间直接的消息传输API。而且不限制跨域消息传递！

8、发送消息使用的是Window对象的postMessage(data,targetURL)方法就可以了，但给哪个window对象发送消息，就使用哪个window的实例来调用，注意这个细节。

9、文档默认监听一下message事件就可以接受消息了：window.addEventListener("message", function(ev){});

10、监听消息事件：ev两个重要属性：ev.source指向发送消息的源window对象，ev.data来获取收到的消息数据

11、多线程技术在服务端技术中已经发展的很成熟了，而在Web端的应用中却一直是鸡肋

12、在新的标准中，提供的新的WebWork API，让前端的异步工作变得异常简单。

13、使用：创建一个Worker对象，指向一个js文件，然后通过Worker对象往js文件发送消息，js文件内部的处理逻辑，处理完毕后，再发送消息回到当前页面，纯异步方式，不影响当前主页面渲染。

五、跨域请求如何携带cookie不小心都拿了Offer

最近在参加面试找工作，陆陆续续的面了两三家。其中面试官问到了一个问题：如何解决跨域问题？我巴巴拉拉的一顿说，大概了说了四种方法，然后面试官紧接着又问：那跨域请求怎么携带cookie呢？（常规的面试套路，一般都会顺着你的回答往深了问）由于之前的项目都是同源的，不牵涉跨域访问，所以一时没有回答出来，后来研究了下，所以有了这篇文章

先看下代码结构，相对比较的简单：

首先我们先在 A服务的 index.html页面中得到一个 cookie,运行 A服务：

然后打开 :没有问题的话，页面长这样：

这个时候 F12打开控制台：可以看到发送了一个 login请求，并且设置了cookie,也可以选择浏览器控制台的 Application页签，选中 cookie，可以看到 cookie的信息：

然后我们点击页面上的发送同源请求按钮，可以看到发送了一个user请求，并且已经携带上了cookie：

接下来刺激的画面来了，我们点击发送跨域请求按钮，出现了跨域请求的报错：

重点：接下来开始解决跨域携带cookie问题：

XMLHttpRequest.withCredentials属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。

如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。

这个时候再去发送一个跨域请求，你会发现依旧报错，但是我们仔细看下报错，意思是需要设置header的 Access-Control-Allow-Origin属性：

我们修改 B(app2.js)服务的代码：

修改完之后再次发送一个跨域请求，你会发现，又报错了(接近崩溃)，但是跟之前报的错不一样了，意思大概就是 Access-Control-Allow-Credentials这个属性应该设置为 true，但是显示得到的是个''：

再次修改B服务的代码（每次修改后需要重新运行）：

可以看到，这个跨域请求已经请求成功并且返回数据了！而且也携带了A服务的cookie，这个时候已经大功告成了。

谷歌浏览器跨域cookie和谷歌浏览器跨域怎么设置的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！