如何为静态页面+React+Express实现dev/prod的HTTPS适配构建

1. Dev环境单独启用HTTPS后端，Prod用HTTP #

利用NODE_ENV环境变量判断运行环境，Dev环境加载本地自签证书启动HTTPS服务，Prod环境直接用HTTP（依赖CDN/Apache做HTTPS反向代理）：

const express = require('express');
const http = require('http');
const https = require('https');
const fs = require('fs');
const app = express();

// 挂载路由（Stripe支付、/api/log等）
app.use('/api', require('./routes/api'));

if (process.env.NODE_ENV === 'development') {
  // 本地自签证书可通过mkcert工具生成
  const sslOptions = {
    key: fs.readFileSync('./localhost-key.pem'),
    cert: fs.readFileSync('./localhost.pem')
  };
  https.createServer(sslOptions, app).listen(9292, () => {
    console.log('Dev HTTPS server running: https://localhost:9292');
  });
} else {
  http.createServer(app).listen(9292, () => {
    console.log('Prod HTTP server running on port 9292');
  });
}

2. 自动切换Dev/Prod请求地址 #

通过Webpack的DefinePlugin注入全局环境变量，实现请求地址的自动切换：

Webpack配置 #

// webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
  const isDev = env.mode === 'development';
  return {
    // 其他Webpack配置（入口、loader、热重载等）
    plugins: [
      new webpack.DefinePlugin({
        API_BASE_URL: JSON.stringify(isDev ? 'https://localhost:9292/api' : '/api')
      }),
      new HtmlWebpackPlugin({
        template: './src/index.html', // 你的静态页模板路径
        inject: 'body'
      })
    ]
  };
};

在代码中使用 #

React组件和静态页脚本直接引用全局变量拼接地址：

// React组件内
const logEndpoint = `${API_BASE_URL}/log`;
// 静态页脚本内同理

3. 确保sendBeacon正常工作 #

Dev环境跨域配置 #

在Express后端添加CORS中间件，允许Dev环境静态页的域名（比如Webpack Dev Server默认的http://localhost:8080）：

const cors = require('cors');

if (process.env.NODE_ENV === 'development') {
  app.use(cors({
    origin: 'http://localhost:8080',
    credentials: true // 若需携带Cookie则开启
  }));
} else {
  // Prod环境同域，允许同源请求
  app.use(cors({
    origin: (origin, callback) => {
      // 验证Prod域名，或直接允许同源
      callback(null, true);
    },
    credentials: true
  }));
}

sendBeacon数据格式兼容 #

sendBeacon不支持自定义Headers，发送JSON数据时需转成Blob：

const logData = JSON.stringify({ action: 'payment_complete', timestamp: Date.now() });
const blob = new Blob([logData], { type: 'application/json' });
navigator.sendBeacon(logEndpoint, blob);

同时确保Express后端启用express.json()中间件解析请求体：

app.use(express.json());

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