使用d3.js加载mockelasticdata.json时出现404错误求助

你在Jade/Express/Node环境里用D3.js加载mockelasticdata.json时碰到的404错误，核心原因是Express不会自动对外开放项目内的所有文件，得从静态资源配置、请求路径等方面逐一排查，我给你梳理下具体步骤：

1. 确认Express静态资源配置 #

Express需要通过express.static中间件指定要托管的静态资源目录（比如JSON、前端JS/CSS、图片这类文件）。你得检查项目入口文件（比如app.js）里有没有类似的配置：

const path = require('path');
const express = require('express');
const app = express();

// 把src目录设置为静态资源托管目录，让浏览器能访问里面的文件
app.use(express.static(path.join(__dirname, 'src')));

如果之前没配置这个，或者配置的目录和你的JSON文件所在位置不匹配，服务器就找不到目标文件。

2. 修正D3的请求路径 #

你当前写的src/mockelasticdata.json是项目内部的相对路径，但浏览器发起请求时，是向服务器请求http://你的域名/src/mockelasticdata.json——如果服务器没把src设为静态目录，自然会返回404。

把D3的代码改成这样：

d3.json('/mockelasticdata.json', function(error, mockdata) {
  if (error) return console.error(error);
  console.log('mockdata', mockdata);
  mapdata = mockdata;
  draw(mockdata)
});

修改后浏览器会请求http://你的域名/mockelasticdata.json，服务器会从你配置的静态目录（比如src）里查找这个文件。

3. 核对文件位置和拼写细节 #

• 确认mockelasticdata.json确实在src文件夹下，文件名完全一致（注意大小写！Linux/macOS环境下文件名区分大小写，比如MockElasticData.json和mockelasticdata.json会被识别为两个不同文件）。
• 可以直接在浏览器地址栏输入http://你的域名/mockelasticdata.json，如果能直接看到JSON内容，说明静态资源配置已经没问题了。

4. 排查路由冲突问题 #

虽然你觉得路由配置正确，但要检查有没有其他路由规则优先匹配了这个请求。比如如果你的代码里有类似app.get('/src/:file', (req, res) => { ... })的路由，它会优先处理/src/mockelasticdata.json的请求，而不是交给静态资源中间件。如果有这种情况，要么把静态资源配置放在路由规则前面，要么修改请求路径避免冲突。

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