问题现象：上传附件功能报错，经排查发现，是因为上送字段中userId获取失败，被服务端拒绝请求。userId=window.sessionStorage.getItem('userId')
问题暴露阶段：生产环境 Chrome 103
问题原因：上传功能是在新弹开tab页中实现的，Chrome89后，新弹开的tab页默认不再共享sessionStorage。而测试环境最高版本为Chrome 88。
在Chrome浏览器89版本前，当前会话页面指的是当浏览器窗口没有关闭时，窗口内同域网站可以共享此数据（同源浏览器多个窗口不共享）。89版本后，通过a标签target="_blank"跳转到新页面时sessionStorage就会丢失。
项目开发基于React，路由跳转用的是react-router中的<Link />，Link标签编译后，实际也会渲染为a标签。也会有这个问题。经调研，vue-router同理。
由于开发环境和测试环境的网络限制，联调测试阶段不曾暴露该问题。
解决方法：
最简单的解决办法 - a标签添加属性 rel="opener"
在旧版本Chrome中通过a 标签target="_blank"时跳转到新页面，新页面 window 对象上有一个 opener 属性，新页面会获得前一个页面控制权，就会出现安全问题，noopener 就可以解决这个问题，设置后，新页面的window.opener 就为 null 了。
<a href="xxx" target="_blank" rel="noopener"></a>
更新后，Chrome对于a标签默认添加了noopener属性，所以通过a标签跳转，会丢失新页面的控制权，sessionStorage自然也就丢失了，我们只需要在a标签上加上 rel="opener" 就行了。
<a href="xxx" target="_blank" rel="opener">保留 sessionStorage</a>
react-router或vue-router也可以直接在Link上添加rel="opener"
拓展：
a标签的rel属性用于指定当前文档与被链接文档的关系，仅在 href 属性存在时使用。为了让搜索引擎更好的识别页面中个链接的作用，更加有利于SEO，提升网站收录与排名，可以在网站链接中添加合适的rel属性。
常用的rel属性如下：
1. external
此属性的意思是告诉搜索引擎，这个链接不是本站链接，其实作用相当于 target="_blank"。
为什么要这样写呢？因为有些网站因为是采用严格的 DOCTYPE 声名的，如果你在网页源码中的第一行看到：在这种情况下 target="_blank" 会失效，因此采用 rel='external 这个参数来替代。
2. nofllow
它是告诉搜索引擎，不要将该链接计入权重。因此多数情况下，我们可以将一些不想传递权重的链接进行nofllow处理；例如一些非本站的链接，不想传递权重，但是又需要加在页面中的像 统计代码、备案号链接、供用户查询的链接等等。
nofollow 有两种用法：
1.用于meta元标签：告诉爬虫该页面上所有链接都无需追踪。
<meta name="robots" content="nofollow" />
2.用于a标签：告诉爬虫该页面无需追踪。
<a href="login.aspx" rel="nofollow">登录</a>
3. noopener
a 标签的target="_blank"时，会打开一个新的页面，此时新的窗口的 window 对象上有一个 opener 属性，新的页面获得了前一个页面控制权，就会出现安全问题，noopener 就可以解决这个问题，设置后，新页面的window.opener 就为 null 了。
nofollow主要有三个作用：
1.防止不可信的内容，最常见的是博客上的垃圾留言与评论中为了获取外链的垃圾链接，为了防止页面指向一些拉圾页面和站点。
2.付费链接：为了防止付费链接影响Google的搜索结果排名，Google建议使用nofollow属性。
3.引导爬虫抓取有效的页面：避免爬虫抓取一些无意义的页面，影响爬虫抓取的效率
4. noreferrer
在老的浏览器中，可以使用 rel=noreferrer 禁用HTTP头部的 Referer 属性，使用下面 JavaScript 代替 target="_blank" 的解决此问题。
var otherWindow = window.open('http://www.baidu.com');
otherWindow.opener = null;
otherWindow.location = url;
5. alternate
alternate是一个移动属性，如果权威（canonical）网页有对应的移动版变体，就要为其添加 rel="alternate" 链接，并使其指向此网页的移动版：
<link rel="alternate" media="only screen and (max-width: 640px)" href=http://m.example.com/about/ >
简而言之，当你拥有单独的移动和桌面网站时，你需要将这两者之间的关系清楚地表达到搜索引擎，以帮助他们了解向其用户提供的网站以及防止出现重复内容问题。
6. bookmark
意思是这个链接用于一个代表书签的永久性链接，由于rel只能使用在a超链接里面，通俗的讲使用rel="bookmark"就是说明该超链接是一个书签并且是永久性的。
rel 属性详细如下：
alternate 链接到文档的替代版本（例如打印页、翻译或镜像）。
archives 链接到文档集或历史数据。
author 链接到文档的作者。
bookmark 用作书签的永久 URL。
external 链接到外部文档。
first 链接到集合中的首个文档。
help 链接到帮助文档。
index 链接到文档的索引。
last 链接到集合中最后的文档。
licence 链接到文档的版权信息。
next 集合中下一个文档。
nofollow 链接到未认可的文档，比如付费链接。Google 使用 "nofollow" 来规定其搜索蜘蛛不跟踪该链接。
noreferrer 规定当用户跟随该超链接时，浏览器不应发送 HTTP referer 头。
prev 集合中的前一个文档。
search 链接到文档的搜索工具。
sidebar 链接到应该在浏览器边栏中显示的文档。
tag 当前文档标签（关键词）。
up 提供指向一个文档的链接。该文档提供当前文档的上下文关系。
参考：https://www.cnblogs.com/huiguo/p/12694493.html
标签：版本,sessionStorage,文档,rel,标签,Chrome103,属性,链接,页面 From： https://www.cnblogs.com/guoqiaoqiao/p/17283743.html