Python server showing html as text rather than rendering it

Question

I'm trying to make a server the long way for more control/ learning. when i try to make a simple one with bash i get mimetype errors.

I must be looking at this the wrong way but my server seems to make the browser render the html as text. the html i get in the browser is weird too.

any help would be mush appreciated!

server.py

from http.server import HTTPServer,BaseHTTPRequestHandler

HOST = "localhost"
PORT = 7800

class FeedSpeedServer(BaseHTTPRequestHandler):

    def do_GET(self):


        if self.path == "/":
            self.path = 'index.html'
        
        try:
            
            self.send_header("content-type", "text/html")
            self.send_header("content-type", "text/javascript")
            self.send_header("content-type", "text/css")
            self.end_headers()
            self.file = open(self.path).read()
            self.wfile.write(self.file.encode())
            self.send_response(200)
            
        except:
            self.file = "file not found"
            self.send_response(404)


httpd = HTTPServer((HOST, PORT), FeedSpeedServer)
print("server running...")
httpd.serve_forever()
print("server Stopped")

My web browser shows this...

screenshot

Hamza Hathoute · Accepted Answer · 2022-07-30 17:36:24Z

1

I have never worked with http.server for Python, but common examples I see send the status code first, then the headers, then the content.

Also, the Content-Type must be a single value. This worked for me:

    def do_GET(self):
        if self.path == "/":
            self.path = 'index.html'
        try:
            self.send_response(200)
            self.send_header("content-type", "text/html")
            self.end_headers()
            self.file = open(self.path).read()
            self.wfile.write(self.file.encode())
        except:
            self.send_response(404)
            self.file = "file not found"

If you plan to serve css/javascript, you might want to check the file extension of self.path and set self.send_header("content-type", "text/xxx") accordingly. An example:

    extensions = {
        "html": "text/html",
        "css": "text/css",
        "js": "text/javascript",
        "plain": "text/plain"
    }

    def set_content_type(self):
        extension = self.path.split(".")[-1]
        if extension in self.extensions:
            return self.extensions[extension]

        return self.extensions["plain"]

and replace self.send_header("content-type", "text/html") with self.set_content_type()

edited Jul 30, 2022 at 17:36

answered Jul 30, 2022 at 17:08

Hamza Hathoute

4383 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lo_ Over a year ago

Hi Thanks for getting back to me. I've been messing around with this for around 6 hours now and making very little progress. which way would you serve css/js?

Lo_ Over a year ago

awh thanks a bunch. can i not just add all the content-type headers i will need manually? I have actually noticed that on chrome the html renders fine but i still get an error which i have found to be related to me trying to be clever and use js modules (import/ export of classes)

Lo_ · Accepted Answer · 2022-07-30 18:34:47Z

1

Ok - Figured it out.

So i was having problems with MIME types and java script modules. I have thrown away the server i tried making and found it way easier to just use simple http.server.SimpleHTTPRequestHandler this post fixed everything for me - Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain"

Also, put .js on the end of your import paths like this:

import { FeedsSpeeds } from "./FeedsSpeeds.js";

answered Jul 30, 2022 at 18:34

Lo_

2110 bronze badges

Collectives™ on Stack Overflow

Python server showing html as text rather than rendering it

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related