如何在Heroku上的原生前端应用中设置正确的后端URL

前端baseUrl配置问题 #

由于你的前端是通过Express后端直接托管的（sendFile返回index.html），前后端处于同一域名下，根本不需要硬编码域名，两种极简方案：

方案1：用相对路径（最推荐） #

直接删除baseUrl，请求接口时用相对路径。比如原来的：

fetch(`${baseUrl}/api/your-endpoint`)

改成：

fetch('/api/your-endpoint')

浏览器会自动拼接当前页面的域名（本地是localhost:3000，Heroku上是你的应用域名），完全无需手动配置。

方案2：动态获取当前域名 #

如果一定要保留baseUrl变量，用浏览器的window.location.origin自动获取当前页面的协议+域名+端口：

const baseUrl = window.location.origin;

不管是本地开发还是Heroku部署，都会自动适配环境，不用改任何代码。

后端CORS配置问题 #

同样因为前后端同域，正常情况下不需要CORS配置——同域请求不会触发浏览器的跨域校验。如果本地开发时有特殊场景（比如前端单独用其他端口启动），可以动态配置：

方案：根据环境自动切换CORS规则 #

修改后端的cors配置，通过NODE_ENV环境变量判断环境：

const corsOptions = {
  origin: process.env.NODE_ENV === 'production'
    ? true // 生产环境允许当前请求的origin（同域请求自动通过）
    : 'http://localhost:3000', // 开发环境仅允许本地前端
  optionsSuccessStatus: 200
};
app.use(cors(corsOptions));

如果本地开发时也是用Express托管前端，甚至可以直接删掉CORS中间件，完全不会有跨域问题。

补充：Heroku应用的域名是固定的（格式为https://<你的应用名>.herokuapp.com），只要你不修改应用名称就不会变，也可以直接把生产环境的origin设为这个固定域名，但动态判断的方式更灵活。

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