javascript无法直接读取构建时环境变量，需通过构建工具（如vite、webpack）将node_env等变量注入代码；cookie domain须构建时确定，跨子域需以点开头（如.example.com），localhost不可设domain；secure需https支持，httponly只能由后端设置；推荐后端模板注入window.__config__更健壮。

在自动化部署中，JavaScript 本身无法直接读取构建时的环境变量（如 NODE_ENV 或自定义的 COOKIE_DOMAIN），因为浏览器运行时没有访问系统环境的能力。但可以通过构建工具链将环境变量“注入”到前端代码中，从而实现不同环境（开发、测试、预发、生产）下 Cookie 的 domain 属性动态配置。关键在于：**Cookie 域名必须在写入时确定，且需符合同源策略与跨子域共享规则**。

构建阶段注入环境变量

前端项目（如 Vue、React、Vite 或 Webpack）可在打包时把环境变量作为常量写入 JS。例如：

• Vite 中，在 .env.production 写：VUE_APP_COOKIE_DOMAIN=.prod.example.com；开发环境写：VUE_APP_COOKIE_DOMAIN=localhost
• Webpack 使用 DefinePlugin 将 process.env.COOKIE_DOMAIN 替换为字符串字面量
• 生成的代码中会变成类似：const cookieDomain = ".prod.example.com";，而非运行时求值

写入 Cookie 时动态使用域名

调用 document.cookie 时，拼接预设的 domain 值。注意格式规范：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

• 若需跨子域（如 app.example.com 和 api.example.com 共享 Cookie），domain 必须以点开头，如 .example.com
• 若仅限当前主机（如 localhost 或 127.0.0.1），不能设 domain；否则浏览器会拒绝写入
• 示例逻辑：

document.cookie = `token=abc123; path=/; domain=${cookieDomain}; secure; HttpOnly=false`;

安全与兼容性注意事项

动态 domain 配置容易出错，需严格校验：

• 开发环境用 localhost 时，不要设置 domain 属性（留空或显式设为 ""），否则 Cookie 不生效
• 生产环境启用 Secure 标志前，确保全站走 HTTPS；否则浏览器丢弃该 Cookie
• HttpOnly 由后端 Set-Cookie 设置，前端 JS 无法通过 document.cookie 开启它——这个标志只能由服务器响应头控制
• 建议封装一个 setCookie(name, value, options) 工具函数，自动合并环境 domain、path 默认值和 secure 判断

替代方案：后端统一注入

更健壮的做法是，由后端在 HTML 模板中注入配置对象（如通过 window.__CONFIG__），避免前端构建依赖。例如 Nginx 或 Node.js 服务在返回 HTML 时替换占位符：

<script>window.__CONFIG__ = { cookieDomain: "<%= COOKIE_DOMAIN %>" };</script>

这样既绕过构建工具限制，又支持运行时动态决策（比如根据请求 Host 头判断环境）。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南