使用React环境变量设置Cookie时名称未被正确识别问题

问题原因 #

出现这个问题的核心原因是你使用的环境变量值包含Cookie名称规范禁止的特殊字符，浏览器解析document.cookie赋值的字符串时被截断，导致名称识别异常。
按照Cookie的标准解析规则，document.cookie接收的字符串会按以下逻辑处理：

• 以第一个=为分隔，前面的内容是Cookie名称，后面到下一个;之前的内容是Cookie值
• 一旦遇到;就判定当前Cookie的键值对结束，后续内容为Cookie属性（path、domain等）

如果process.env.REACT_APP_TERMS_CONDITIONS_ACCEPTANCE_NAME的值里包含;、=、空格、引号这类非法字符，就会打乱解析逻辑：比如变量值末尾带;的话，拼接后的字符串会变成xxx;=true;path=/，浏览器会认为第一个;前面的内容已经结束，后面的=true没有对应的名称字段，就会出现名称为空、值拼接异常的现象。

排查和解决方法 #

1. 先验证拼接后的完整字符串格式
   先在赋值前打印完整的Cookie字符串，确认格式是否符合预期，同时检查环境变量是否包含非法字符：

   const cookieKey = process.env.REACT_APP_TERMS_CONDITIONS_ACCEPTANCE_NAME;
   const fullCookieStr = `${cookieKey}=true;path=/`;
   // 打印完整字符串看是否符合「键=值;path=/」的格式
   console.log(fullCookieStr);
   // 检查键是否包含非法字符，输出true代表存在问题
   console.log(/[;=,\s"'<>(){}[\]?@:/]/.test(cookieKey));
   

2. 修复非法字符问题
   • 如果是.env文件里的环境变量加了多余的引号，直接去掉引号即可，比如不要写REACT_APP_TERMS_CONDITIONS_ACCEPTANCE_NAME="xxx"，直接写REACT_APP_TERMS_CONDITIONS_ACCEPTANCE_NAME=xxx
   • 如果环境变量值确实需要保留特殊字符，对键进行编码后再赋值，读取时对应解码即可：

     // 设置时编码
     const encodedKey = encodeURIComponent(process.env.REACT_APP_TERMS_CONDITIONS_ACCEPTANCE_NAME);
     document.cookie = `${encodedKey}=true;path=/`;
     
     // 读取时解码
     function getCookie(key) {
       const targetKey = encodeURIComponent(key);
       const cookies = document.cookie.split('; ');
       for (const item of cookies) {
         const [k, v] = item.split('=');
         if (k === targetKey) return decodeURIComponent(v);
       }
       return null;
     }
     

3. 如果你还有其他同逻辑的Cookie可以正常生效，对比下这部分环境变量和其他正常Cookie的键的区别，基本就能定位到异常字符。

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