React开发环境下，如何在Chromium启动脚本中自动设置Cookie的SameSite=None？

嘿，这个需求完全可以搞定！我给你分享几个实用的方法，帮你摆脱手动设置Cookie SameSite的麻烦：

你可以借助Chrome的DevTools协议，在启动浏览器后自动执行脚本修改Cookie策略，步骤很清晰：

• 先修改你的启动脚本，给Chromium开启远程调试端口：

  "start:browser": "open -n -a /Applications/Chromium.app --args --user-data-dir='/tmp/chromium_dev_test' --disable-web-security --disable-popup-blocking --remote-debugging-port=9222"
  

• 接着写个简单的Node.js脚本（比如叫set-cookie-samesite.js），通过远程调试连接浏览器，直接设置目标Cookie或者全局策略：

  const CDP = require('chrome-remote-interface');
  
  async function setupCookieConfig() {
    const client = await CDP({ port: 9222 });
    const { Network } = client;
    await Network.enable();
  
    // 方案A：给特定域名设置指定Cookie，强制SameSite=None
    await Network.setCookie({
      name: '你的Cookie名称',
      value: '对应的Cookie值',
      domain: 'localhost', // 替换成你的应用域名
      sameSite: 'None',
      secure: true, // 划重点：SameSite=None必须配合Secure属性
      path: '/'
    });
  
    // 方案B：如果想全局处理所有Cookie，这个操作需要依赖DevTools的实验性接口，可能随Chrome版本变化
    // 建议优先用方案A，更稳定
    // await client.send('Browser.setPermission', {
    //   permission: 'cookies',
    //   setting: 'allow',
    //   origin: '*://*'
    // });
  
    await client.close();
  }
  
  setupCookieConfig().catch(console.error);
  

• 最后更新启动脚本，先启动浏览器，稍等几秒让它加载完成，再运行这个Node脚本：

  "start:browser": "open -n -a /Applications/Chromium.app --args --user-data-dir='/tmp/chromium_dev_test' --disable-web-security --disable-popup-blocking --remote-debugging-port=9222 && sleep 2 && node set-cookie-samesite.js"
  

  （sleep 2是给浏览器启动留缓冲时间，根据你的机器性能可以调整时长）

如果你不想写脚本，搞个轻量的Chrome扩展也很方便，浏览器启动后自动帮你修改Cookie的SameSite属性：

• 先建一个扩展目录，比如cookie-samesite-fixer，里面放两个文件：
  1. manifest.json（扩展配置）：

     {
       "manifest_version": 3,
       "name": "Cookie SameSite自动修复",
       "version": "1.0",
       "permissions": ["cookies", "activeTab"],
       "background": {
         "service_worker": "background.js"
       },
       "host_permissions": ["<all_urls>"]
     }
     

  2. background.js（核心逻辑）：

     // 监听Cookie变化，自动把非SameSite=None的Cookie改成None
     chrome.cookies.onChanged.addListener((changeInfo) => {
       if (changeInfo.cookie.sameSite !== 'none') {
         chrome.cookies.set({
           name: changeInfo.cookie.name,
           value: changeInfo.cookie.value,
           domain: changeInfo.cookie.domain,
           path: changeInfo.cookie.path,
           secure: true,
           sameSite: 'none',
           expirationDate: changeInfo.cookie.expirationDate
         });
       }
     });
     
     // 浏览器启动时，自动批量修改现有Cookie
     chrome.runtime.onStartup.addListener(async () => {
       const cookies = await chrome.cookies.getAll({});
       cookies.forEach(cookie => {
         if (cookie.sameSite !== 'none') {
           chrome.cookies.set({
             name: cookie.name,
             value: cookie.value,
             domain: cookie.domain,
             path: cookie.path,
             secure: true,
             sameSite: 'none',
             expirationDate: cookie.expirationDate
           });
         }
       });
     });
     

• 把这个扩展加载到你的测试用户目录里：打开Chromium的chrome://extensions/，开启开发者模式，点击「加载已解压的扩展程序」，选择刚才的cookie-samesite-fixer目录。之后每次启动这个用户目录的浏览器，扩展都会自动生效。

如果这个Cookie是你的React应用自己设置的，那最简单的方法就是在设置Cookie的代码里直接加上SameSite=None; Secure属性：

document.cookie = "yourCookieName=yourCookieValue; SameSite=None; Secure; Path=/";

这样启动应用后，Cookie会自动带上正确的SameSite配置，完全不用手动操作。

注意点 #

• 用SameSite=None的时候必须搭配Secure属性，不然浏览器会拒绝保存这个Cookie（即使是本地localhost，建议也加上，你的--disable-web-security可能能绕过，但规范上还是要遵守）。
• 如果是第三方网站的Cookie，那方法1和方法2更适合，毕竟你没法修改第三方的代码。

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