Playwright设置Cookie后React v16应用无法获取问题排查

补充说明 #

经进一步排查发现，该问题仅出现在React v16中，暂未明确原因；在React v18或Vue v2.6.10中无此问题。

我在Playwright测试中通过浏览器上下文设置Cookie，代码如下：

test.beforeEach(async ({ page, browser }) => {
  const context = await browser.newContext()
  await context.addCookies([
    {
      name: AUTHTKN,
      value: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzI1NDUyMzh9.AN93Ms3qkL_mkY2_bF_-mI3MvhXVKbrsV4BRPLLF5hs',
      domain: 'localhost',
      path: '/',
      expires: moment().add(24, 'hours')
    }
  ])

  const cookies = await context.cookies()
  console.log(JSON.stringify(cookies, null, 2))

  await page.goto('/')
})

通过console.log可以看到Cookie已存在：

[
  {
    "name": "AUTHTKN",
    "value": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzI1NDUyMzh9.AN93Ms3qkL_mkY2_bF_-mI3MvhXVKbrsV4BRPLLF5hs",
    "domain": "localhost",
    "path": "/",
    "expires": 7776000,
    "httpOnly": false,
    "secure": false,
    "sameSite": "Lax"
  }
]

但在应用代码中无法找到该Cookie，我通过以下方式从内存加载Cookie：

const getAll = () => {
  const pairs = document.cookie.split(';')
  const cookies = {}
  for (let i = 0; i < pairs.length; i++) {
    var pair = pairs[i].split('=')
    cookies[(pair[0] + '').trim()] = unescape(pair.slice(1).join('='))
  }
  return cookies
}

getAll()['AUTHTKN']
// => undefined

在真实场景中，我通过应用自身的Cookie设置函数可以正常设置并获取Cookie，但Playwright模拟设置的Cookie无法被识别：

const set = (key, value, seconds, domain) => {
  // ...
  let string = `${key}=${value}`
  if (seconds) string += `; max-age=${seconds}`
  if (domain) string += `; domain=${domain}`
  string += `; path=/`
  document.cookie = string
}
const NINETYDAYSASSECONDS = 90 * 86400
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzI1NDUyMzh9.AN93Ms3qkL_mkY2_bF_-mI3MvhXVKbrsV4BRPLLF5hs'
set('AUTHTKN', token, NINETYDAYSASSECONDS, null)
getAll()['AUTHTKN']
// => 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2NzI1NDUyMzh9.AN93Ms3qkL_mkY2_bF_-mI3MvhXVKbrsV4BRPLLF5hs'

我怀疑问题与domain或sameSite属性有关，但暂无法确认。

内容的提问来源于stack exchange，提问作者alilland