.NET 6+Angular 5：迁移代理至web.config并解决WebpackDevMiddleware报错

错误原因 #

添加http_proxy环境变量后，WebpackDevMiddleware的热模块替换（HMR）请求被错误转发到了代理服务器，而代理返回的是HTML内容（比如代理错误页）而非预期的JSON响应，导致JSON解析时遇到HTML开头的<字符，触发System.AggregateException。

解决步骤 #

• 调整no_proxy范围：将本地开发服务器的地址和HMR端口加入no_proxy，确保本地HMR请求不走代理。在web.config的<environmentVariables>中修改配置：

  <environmentVariables>
    <add name="http_proxy" value="http://your-proxy-server:port" />
    <add name="https_proxy" value="https://your-proxy-server:port" />
    <add name="no_proxy" value="localhost,127.0.0.1,::1,localhost:5000,localhost:44300" />
  </environmentVariables>
  

  注意替换成你实际使用的开发端口。

• 验证http_proxy格式：确保http_proxy是完整的URL格式（如http://proxy.example.com:8080），无多余字符或HTML转义。

• 排除HMR请求的代理规则：在Startup.cs中，让HMR相关路径跳过全局代理配置：

  // 仅对非HMR请求应用代理
  app.UseWhen(context => 
      !context.Request.Path.StartsWithSegments("/__webpack_hmr") && 
      !context.Request.Path.StartsWithSegments("/hmr"), 
      appBuilder =>
  {
      // 这里放置你的全局代理中间件配置
  });
  

• 检查Angular代理配置：如果项目使用proxy.conf.json，确保HMR请求路径（/__webpack_hmr）没有被错误路由到代理，保持直接指向本地Webpack服务器。

HMR与http代理的兼容性确认 #

WebpackDevMiddleware的HotModuleReplacement在.NET 6 + Angular 5环境下完全支持http代理配置，核心是要明确区分本地HMR请求和外部API请求的路由规则，避免本地HMR流量被转发到代理服务器。Angular 5的HMR依赖Webpack的hot-middleware，只要保证该中间件的请求不经过代理，就能正常实现热更新功能。

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