WPF中WebView2加载Angular单页应用时JS、图片等静态资源返回404问题

1 Angular部署配置排查 #

Angular的路径寻址配置是该类问题最高发的原因，优先检查以下配置：

• 核对base href配置：如果Angular打包时设置的base href为绝对路径，和站点实际部署的根路径不匹配，会导致WebView2资源寻址错误。比如站点部署在https://yourdomain.com/spa/，但base href设为/，WebView2请求资源时会直接去域名根路径查找，触发404。
  解决方法：执行打包命令时指定相对路径base href：
  ng build --base-href ./
  该配置会让所有静态资源基于index.html的相对路径寻址，适配不同部署路径。
• 验证资源文件名哈希兼容性：部分旧版WebView2对带特殊哈希后缀的资源请求处理存在兼容问题，可临时在angular.json中关闭文件名哈希测试：

  "configurations": {
    "production": {
      "outputHashing": "none"
    }
  }
  

  注意该配置仅用于问题定位，生产环境建议保留哈希做静态资源缓存控制。

2 WebView2控件配置排查 #

• 核对WebView2运行时版本：WebView2运行时版本和本地正常访问的Edge浏览器版本不一致时，会出现请求规则、协议处理的差异。可通过以下代码打印当前运行时版本，和Edge浏览器版本对比，版本过低时升级WebView2运行即可：
  webView21.CoreWebView2.Environment.BrowserVersionString
• 排查自定义请求拦截逻辑：如果你的代码中实现了WebResourceRequested事件自定义处理请求，可能存在逻辑异常误拦截静态资源请求，临时注释该部分代码测试即可验证。
• 补充必要的启动参数：如果Angular存在跨域资源请求，可在WebView2初始化时添加启动参数适配：

  var env = await CoreWebView2Environment.CreateAsync(null, null, new CoreWebView2EnvironmentOptions("--allow-file-access-from-files --disable-web-security"));
  await webView21.EnsureCoreWebView2Async(env);
  

  注意--disable-web-security仅用于测试环境，生产环境建议通过服务端配置CORS解决跨域问题。
• 自签名证书适配：如果站点使用自签名SSL证书，WebView2默认会拦截请求，可临时添加证书校验绕过逻辑测试：

  webView21.CoreWebView2.ServerCertificateErrorDetected += (sender, e) =>
  {
      e.Action = CoreWebView2ServerCertificateErrorAction.AlwaysAllow;
  };
  

  生产环境请使用正规CA颁发的证书，不要绕过校验。

3 服务端配置排查 #

• 校验User-Agent拦截规则：WebView2的默认User-Agent和普通Edge浏览器存在细微差异，部分服务端WAF规则会拦截陌生UA的资源请求返回404。可将WebView2的UA修改为和本地正常访问的Edge浏览器一致验证：

  webView21.CoreWebView2.Settings.UserAgent = "你的本地Edge浏览器UA字符串";
  

• 核对SPA路由回退规则：如果你是直接访问Angular的子路由而非站点根路径，服务端没有配置路由回退到index.html的规则时也会返回404。如果是访问根路径出现的404可忽略该项。

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