使用D3加载外部网站大JSON文件遇CORS问题求解决方案

你遇到的是典型的跨域资源共享（CORS）限制问题，核心原因是目标服务器otherwebsite.com没有返回允许你的域名访问的响应头。结合200MB大文件的场景，给你几个可行的解决办法：

1. 配置目标服务器开启CORS（优先方案，若你能控制otherwebsite.com） #

直接在otherwebsite.com的服务器上添加CORS响应头，允许https://mywebsite.com访问：

• 若用Nginx，在配置文件里添加：

  location /data.json {
      add_header Access-Control-Allow-Origin https://mywebsite.com;
      add_header Access-Control-Allow-Methods GET;
      # 针对大文件开启分块传输，避免超时
      chunked_transfer_encoding on;
      proxy_buffering off;
  }
  

• 若用Apache，在.htaccess或配置文件里添加：

  <Files "data.json">
      Header set Access-Control-Allow-Origin "https://mywebsite.com"
      Header set Access-Control-Allow-Methods "GET"
  </Files>
  

  同时记得调整服务器的请求超时、最大文件传输大小等参数，适配200MB的文件体积。

2. 用自己的服务器做代理（无法控制目标服务器时用） #

在mywebsite.com的后端写一个代理接口，前端请求这个接口，由后端去拉取otherwebsite.com/data.json再返回给前端，这样就不会触发跨域限制。而且后端可以用流式传输处理大文件，避免内存过载：

• Node.js（Express）代理示例：

  const express = require('express');
  const http = require('http');
  const app = express();
  
  app.get('/proxy-data', (req, res) => {
      const targetUrl = 'http://otherwebsite.com/data.json';
      // 流式转发，不把整个文件读进内存
      http.get(targetUrl, (response) => {
          res.setHeader('Content-Type', 'application/json');
          response.pipe(res);
      }).on('error', (err) => {
          res.status(500).send('代理请求失败');
      });
  });
  
  app.listen(3000);
  

  前端D3代码改成请求自己的代理接口：

  d3.json("/proxy-data", function(error, json) {
      if (!error) {
          console.log('done loading', json)
      } else {
          console.log(error)
      }
  })
  

3. 流式加载+分块处理（优化大文件前端性能） #

200MB的JSON直接加载会占用大量前端内存，建议配合流式API分块解析，降低内存压力：

fetch('/proxy-data') // 请求自己的代理接口
  .then(response => {
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      let partialData = '';
      return reader.read().then(function processResult(result) {
          if (result.done) {
              const json = JSON.parse(partialData);
              console.log('done loading', json);
              return;
          }
          partialData += decoder.decode(result.value, { stream: true });
          // 这里可以做增量解析，提前处理部分数据
          return reader.read().then(processResult);
      });
  })
  .catch(error => console.log(error));

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