Webpack模式导致Heroku Staging环境baseURL配置异常求助

问题背景 #

我搭建了包含staging和production环境的Heroku流水线，应用基于React、NodeJS和Webpack构建。部署到staging环境时，baseURL指向生产环境地址而非staging地址，已确认问题根源是Webpack模式设置——Webpack和Heroku仅支持development或production两种模式，设置NODE_ENV=staging完全无效。

报错信息 #

Staging环境控制台报错 #

xhr.js:258 Refused to connect to 'http://localhost:4000/api/users/login' because it violates the following Content Security Policy directive: "connect-src 'self' https://stagingapp.herokuapp.com".

Production环境报错 #

Access to XMLHttpRequest at 'https://stagingapp.herokuapp.com/api/users/login' from origin 'https://prodapp.herokuapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'https://stagingapp.herokuapp.com' that is not equal to the supplied origin.

这些报错看似是CORS和CSP问题，但本质是Webpack干扰了baseURL配置，只要baseURL和当前环境匹配，所有问题都会消失。

已尝试的操作 #

• 在Heroku中添加配置变量：staging环境设NODE_ENV=staging，production环境设NODE_ENV=production
• 尝试多种方式调整Webpack模式
• 修改构建脚本，但Heroku仅支持build或heroku-postbuild等命令，无法使用staging专属脚本
• 尝试用Axios控制baseURL，但Axios配置在生产/预发布环境无效——因为baseURL在构建阶段确定，而Axios配置是运行时生效
• 将staging环境改为production模式后，staging可正常运行，但生产环境会调用staging的baseURL
• 多次查阅文档，但关于Heroku上Webpack构建的资料较少

相关代码片段 #

Webpack配置 #

mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'

package.json构建脚本 #

已尝试多种写法，包括带NODE_ENV=staging和不带--mode production标签

"build": "webpack --mode production"

Axios配置（生产/预发布环境无效） #

import axios from 'axios';

// 定义不同环境的baseURL
const baseURLs = {
  development: 'LOCAL HOST URL',
  staging: 'STAGING URL',
  production: 'PROD URL',
};

// 根据NODE_ENV判断当前环境
const environment = process.env.NODE_ENV;

// 创建Axios实例并配置
const instance = axios.create({
  baseURL: baseURLs[environment],
  withCredentials: true,
});

export default instance;

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