Webpack 3.5.3 Dev Server HTTPS模式下CORS请求报错求助

我之前维护老项目时也碰到过一模一样的问题，webpack 3.x版本的devServer启用HTTPS后，内部模块的自定义协议路径确实会触发Fetch的CORS检查限制。咱们一步步拆解解决：

问题根源 #

webpack-dev-server在开发环境下会用webpack-internal://这个自定义协议加载内部模块，但Fetch API的CORS规则只认可http或https协议。当你的GTM脚本里用Fetch请求这个内部路径时，就会抛出「URL scheme must be "http" or "https"」的报错。

具体解决方案 #

1. 替换手动Fetch为Webpack模块导入 #

先检查代码里是不是手动写了Fetch请求webpack-internal:///./src/utils/analytics/gtm.js？这完全是多余的操作——Webpack本身就是模块打包工具，直接用模块导入就能处理文件加载：

// 替换掉Fetch请求的代码
import './utils/analytics/gtm.js';

// 如果需要用户触发后动态加载，用Webpack的动态import语法
document.getElementById('your-trigger-btn').addEventListener('click', () => {
  import('./utils/analytics/gtm.js').then((module) => {
    // 调用GTM初始化逻辑
    module.initGTM();
  });
});

Webpack会自动处理模块依赖，不管是开发还是生产环境，都不会出现自定义协议的路径问题。

2. 调整Webpack配置，统一资源路径 #

如果项目里有自动生成资源路径的逻辑，检查webpack.config.js的以下配置：

• 设置output.publicPath为你的HTTPS服务地址：

module.exports = {
  output: {
    publicPath: 'https://localhost:8080/' // 和你的devServer地址保持一致
  },
  devServer: {
    https: true,
    public: 'https://localhost:8080' // 确保devServer对外暴露的地址是HTTPS
  }
};

这个配置会让Webpack生成的所有资源路径都用指定的HTTPS地址，避免出现webpack-internal://的自定义协议路径。

3. 处理第三方GTM脚本的情况 #

如果是第三方GTM容器自动生成的请求触发报错，大概率是你的GTM配置指向了本地开发环境的资源。这时候可以：

• 用环境变量判断，在开发环境下暂时禁用GTM加载：

if (process.env.NODE_ENV !== 'development') {
  // 加载第三方GTM脚本的逻辑
}

• 修改GTM容器配置，把资源路径改成本地HTTPS服务的完整路径，而非相对路径或内部模块路径

4. 临时测试方案（不推荐长期使用） #

如果你只是想快速验证功能，可以用Chrome无安全模式启动，绕过CORS检查：

# Windows
chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"

# Mac
open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

这个办法只能临时用，生产环境必须遵守CORS规则。

内容的提问来源于stack exchange，提问作者red house 87