使用自定义域名时Heroku配置变量的设置问题

配置变量正确设置 #

ORIGIN（CORS配置） #

设置为https://www.sunshine.xyz，这是你前端实际的访问地址，CORS需要精确匹配来源。如果需要同时支持https://sunshine.xyz，可以将ORIGIN设为JSON数组字符串"[\"https://www.sunshine.xyz\", \"https://sunshine.xyz\"]"，然后后端代码调整为：

const origin = JSON.parse(process.env.ORIGIN);
app.use(cors({ credentials: true, origin: origin }));

注意不要使用true，生产环境下允许所有来源不安全，还可能导致凭证（credentials）传递失效。

REACT_APP_SERVER（前端请求地址） #

设置为https://www.sunshine.xyz（如果前后端部署在同一个Heroku应用）。如果前后端是分开的Heroku应用，就设为后端应用的自定义域名或Heroku默认URL（如https://sunshine-website-43bdd7b1a0fd.herokuapp.com）。不要使用Heroku的DNS目标地址，那是用于DNS解析的，不能直接作为请求地址。

其他可能的问题排查 #

• Cookie配置问题：后端设置Cookie时，需确保domain为.sunshine.xyz，secure: true，sameSite: "None"，否则跨域场景下Cookie无法正常传递。
• 后端端口配置：后端必须使用process.env.PORT监听端口，不能用固定端口，否则Heroku无法路由请求。
• DNS缓存：用nslookup www.sunshine.xyz验证DNS解析是否正确指向Heroku，或清除本地DNS缓存。
• SSL证书范围：确认Heroku的SSL证书覆盖了www.sunshine.xyz和sunshine.xyz两个域名。
• 前端构建更新：修改REACT_APP_SERVER后，必须重新构建前端（执行npm run build）并部署，因为React环境变量是构建时注入的。

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