使用D3.csv加载CSV文件却读取到HTML内容的问题求助

算力阿峰

2026-8-14

问题原因及解决方案

核心问题

你的Node服务器未根据请求路径区分返回资源：不管浏览器请求的是首页/还是CSV文件./Data/data2.csv，服务器都会返回index.html的内容，同时错误地将所有响应的Content-Type设为html，这直接导致d3加载CSV时拿到的是页面HTML代码。

修复步骤

解析请求路径：用Node的url模块解析请求路径，区分不同资源的请求
匹配对应资源：根据请求路径返回对应的文件（首页或CSV）
设置正确的Content-Type：针对不同文件类型设置对应MIME类型，比如CSV文件用text/csv
处理异常情况：返回404对应不存在的资源，返回500对应文件读取失败的情况

修改后的服务器代码示例

const http = require('http');
const fs = require('fs');
const url = require('url');

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url);
  let filePath = '';
  let contentType = '';

  // 根据请求路径匹配对应文件
  if (parsedUrl.pathname === '/') {
    filePath = 'index.html';
    contentType = 'text/html';
  } else if (parsedUrl.pathname === '/Data/data2.csv') {
    filePath = './Data/data2.csv';
    contentType = 'text/csv';
  } else {
    // 处理不存在的资源
    res.statusCode = 404;
    res.setHeader('Content-Type', 'text/plain');
    res.end('404 Not Found');
    return;
  }

  try {
    const content = fs.readFileSync(filePath);
    res.statusCode = 200;
    res.setHeader('Content-Type', contentType);
    res.end(content);
  } catch (err) {
    // 处理文件读取失败
    res.statusCode = 500;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Server Error');
  }
});