Webpack生产构建后Axios请求协议异常：HTTP变HTTPS问题求助

问题描述 #

使用Axios发起指向HTTP目标地址的请求，经Webpack生产构建后，请求协议自动变为HTTPS：

• 正确目标地址：http://ip-api.com/json
• 错误目标地址：https://ip-api.com/json

请求截图：

当前使用的webpack.prod.config.js配置：

const common = require('./webpack.common.config')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = merge(common, {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        loader: 'ts-loader',
        exclude: /node_module/
      },
      {
        test: /\.scss$/,
        use: [{
          loader: MiniCssExtractPlugin.loader
        }, {
          loader: 'css-loader',
          options: {
            modules: true
          }
        }, {
          loader: 'sass-loader'
        }
        ]
      }
    ]
  },
  devtool: 'cheap-module-source-map',
  externals: {
    axios: 'axios',
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './template.prod.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'main-bundle-[hash].css'
    })
    // new FaviconsWebpackPlugin({
    //   logo: './public/static/img/favicon.png',
    //   inject: true
    // })
  ]
})

可能的原因及解决办法 #

1. 浏览器混合内容安全机制 #

如果你的生产环境页面是HTTPS协议，浏览器会自动阻止混合内容（HTTPS页面发起HTTP请求），甚至自动将HTTP请求升级为HTTPS，这是浏览器默认的安全策略：

• 解决方案：直接将目标地址改为HTTPS（https://ip-api.com/json，该接口本身支持HTTPS）；若必须使用HTTP，需在页面配置CSP（内容安全策略）允许混合内容，但不推荐，会降低安全性。

2. Axios配置问题 #

检查你的Axios实例是否存在强制HTTPS的配置：

• 是否全局设置了baseURL为HTTPS地址；
• 是否有代码逻辑根据当前页面协议自动替换请求协议（比如window.location.protocol）；
• 是否配置了httpsAgent强制使用HTTPS连接。

示例：若存在以下代码，需调整或删除：

// 错误示例：强制替换为HTTPS
const baseURL = window.location.protocol + '//ip-api.com/json';
// 或
const axiosInstance = axios.create({
  baseURL: 'https://ip-api.com'
});

3. Webpack全局变量配置 #

检查webpack.common.config中是否通过DefinePlugin定义了影响请求地址的全局变量，比如：

// webpack.common.config 可能存在的配置
new webpack.DefinePlugin({
  'process.env.API_BASE_URL': JSON.stringify('https://ip-api.com')
})

若有，将协议修正为http，或根据需求调整。

4. Webpack插件影响 #

部分插件（如PWA相关插件）可能强制所有请求使用HTTPS，检查是否启用了这类插件（如WorkboxPlugin），并调整其配置允许HTTP请求。

排查步骤 #

1. 在本地开发环境测试请求，确认是否正常使用HTTP；
2. 检查Axios请求代码，排除手动协议替换逻辑；
3. 查看webpack.common.config的完整配置，排查全局变量或插件影响。

内容的提问来源于stack exchange，提问作者Cleriston Martins Cardoso