d3 does not support cross-domain request even though after using SimpleHTTPServer

Question

I want to load a tsv file from a specific directory which is different from the d3 directory. My d3 script resides under /home/meet/workspace/d3_test/scripts and SimpleHTTPServer running at "/" root.

d3.tsv("http://localhost:8888/home/meet/data/data.tsv",function(error,data){ 
    console.log("fetching data.tsv file "+error+data);
    });

Throwing an error:

GET http://localhost:8888/home/meet/data/data.tsv 200 OK 5ms (in red color)
fetching data.tsv file [object XMLHttpRequest] undefined

Note:-

1. Tried passing file:/// which is not supported
2. Mike mentions link with SimpleHTTPServer
3. Also, I don't want to edit my browser settings

Answer 1

I end up running server at root "/" with python -m SimpleHTTPServer 8888 &

accessing my html file from localhost

for e.g. - http://localhost:8888/home/meet/workspace/d3_test/scripts/data_fetch.html

and my tsv file is on following location

http://localhost:8888/home/meet/data/data.tsv

Note:- Setting up your SimpleHTTPServer at root "/" helps you to fetch any file from any directory at given security cost.

EDIT:-

Unfortunately, SimpleHTTPServer is really that simple that it does not allow any customization, especially not of the headers it sends. You can however create a simple HTTP server yourself, using most of SimpleHTTPServer and just add that desired header.

Simply create a file simple-cors-http-server.py (or whatever) and put the following inside:

#! /usr/bin/env python2
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)

Then you can do python simple-cors-http-server.py and it will launch your modified server which will set the CORS header for every response.

Answer 2

Doesn't seem like there's enough evidence to conclude that this is a cross-domain problem. The console log should be able to provide more details, but I'd guess that the problem is that the server isn't setting the mime type correctly for tab-separated values. According to the d3.js source code for tsv files the mime type should be "text/tab-separated-values". Should be easy enough to check this in the console.