Serving files from a local CORS server for local development

March 27, 2020

dev

Googling around, I found an awesome little script that allows you to transform python's SimpleHTTPServer into a CORS enabled server. All credit for this handy script goes to enjalot on GitHub.

import SimpleHTTPServer
class CORSHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
def send_head(self):
"""Common code for GET and HEAD commands.
This sends the response code and MIME headers.
Return value is either a file object (which has to be copied
to the outputfile by the caller unless the command was HEAD,
and must be closed by the caller under all circumstances), or
None, in which case the caller has nothing further to do.
"""

path = self.translate_path(self.path)
f = None
if os.path.isdir(path):
if not self.path.endswith('/'):
# redirect browser - doing basically what apache does
self.send_response(301)
self.send_header("Location", self.path + "/")
self.end_headers()
return None
for index in "index.html", "index.htm":
index = os.path.join(path, index)
if os.path.exists(index):
path = index
break
else:
return self.list_directory(path)
ctype = self.guess_type(path)
try:
# Always read in binary mode. Opening files in text mode may cause
# newline translations, making the actual size of the content
# transmitted *less* than the content-length!
f = open(path, 'rb')
except IOError:
self.send_error(404, "File not found")
return None
self.send_response(200)
self.send_header("Content-type", ctype)
fs = os.fstat(f.fileno())
self.send_header("Content-Length", str(fs[6]))
self.send_header("Last-Modified", self.date_time_string(fs.st_mtime))
self.send_header("Access-Control-Allow-Origin", "*")
self.end_headers()
return f


if __name__ == "__main__":
import os
import SocketServer

PORT = 31338

Handler = CORSHTTPRequestHandler
#Handler = SimpleHTTPServer.SimpleHTTPRequestHandler

httpd = SocketServer.TCPServer(("", PORT), Handler)

print "serving at port", PORT
httpd.serve_forever()

I copied the above gist into a folder, then within that made a "data" folder where I put CSVs and JSON files for local projects I'm working on.

My CORS server file structure.

Now, when I need to work locally and use some of this data, I can plop it in there and spin up the server with python cors_server.py

This creates a server that allows you to grab the files at localhost:31338/data/file_name. So when it's time to grab the files, I can grab it with axios. Here's an example from a Vue project I was just messing around with.

axios
.get("http://localhost:31338/data/programs.json")
.then((response) => (this.programs = response.data.programs));

Cool little tip for working locally, enjoy!