Blazor .NET 6项目中d3.json加载GeoJSON报404的解决咨询

1. 确认静态文件中间件配置 #

Blazor项目无论Server还是WASM类型，都需要确保静态文件中间件正常启用，检查Program.cs中的代码：

// Blazor Server 示例配置顺序
app.UseStaticFiles(); // 这行必须在路由配置之前
app.UseRouting();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

// Blazor WASM 无需额外配置静态文件，但如果有自定义部署路径，确保wwwroot被正确映射

2. 修正d3.json的请求路径 #

Blazor中静态文件的根目录是wwwroot，路径写法需要匹配项目的路由基路径：

• 基于base标签的绝对路径：通过页面的base标签获取应用基路径，避免部署子路径时出错：

  const baseHref = document.querySelector('base').getAttribute('href');
  const geoJsonPath = `${baseHref}json/upr-routes.geojson`;
  d3.json(geoJsonPath).then(data => {
    // 你的数据动画逻辑
  });
  

• 相对路径写法：如果JS文件放在wwwroot/js/目录下，相对路径可以写成../json/upr-routes.geojson：

  d3.json('../json/upr-routes.geojson').then(data => {
    // 你的数据动画逻辑
  });
  

3. 检查文件位置与属性 #

• 确认upr-routes.geojson确实在wwwroot/json/目录下，注意路径大小写（Linux部署环境严格区分大小写）。
• 在Visual Studio中选中该文件，右键打开属性面板，将复制到输出目录设置为「如果较新则复制」或「始终复制」，确保文件能被正确发布到输出目录。

4. 排查Blazor Server路由冲突 #

如果是Blazor Server项目，检查是否有自定义路由模板匹配了/json/开头的路径，导致静态文件请求被路由系统拦截。确保UseStaticFiles()在UseRouting()之前调用，让静态文件请求优先被处理。

5. 直接验证路径可用性 #

在浏览器地址栏输入完整的文件URL（例如https://localhost:5001/json/upr-routes.geojson），如果能正常查看或下载文件，说明路径配置正确，问题出在JS中的路径写法；如果仍返回404，回到前面的步骤重新检查文件位置和静态配置。

内容的提问来源于stack exchange，提问作者Enrique A. Pinelo Novelo