title: Content-type headers & MIME Errors
body: <p>I am trying to run a server with python which serves a HTML file referencing multiple javascript files and a CSS file</p>
  <p>I keep getting these kind of errors</p>
  <blockquote>
  <p>&quot;Loading module from “http://localhost:9999/scripts/main.js” was
  blocked because of a disallowed MIME type (“”).&quot;</p>
  </blockquote>
  <p>after doing a heap of research i thought it might be that content-type headers i need to mess around with but i willing to concede its probably something completelt different.</p>
  <p>all code below, any help would be amazing, not just on this topic but if im doing something stupid please let me know (im new to web!) thank you in advance!</p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;title&gt;Feeds &amp; Speeds&lt;/title&gt;
    &lt;link href=&quot;styles/style.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;nav&quot; class=&quot;navbar&quot;&gt;
      &lt;nav&gt;
        &lt;h2&gt;Navigation&lt;/h2&gt;
        &lt;div id=&quot;FeedSpeed_button&quot;&gt;
          &lt;p&gt;Feeds &amp; Speeds&lt;/p&gt;
        &lt;div id=&quot;Material_button&quot;&gt;
          &lt;p&gt;Materials&lt;/p&gt;
          &lt;P&gt;Tool Library&lt;/P&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
    &lt;div id=&quot;content&quot; class=&quot;content&quot;&gt;
      &lt;input type=&quot;button&quot; id=&quot;but&quot; value=&quot;click me&quot;&gt;
    &lt;/div&gt;
  
    &lt;script type=&quot;module&quot; src=&quot;scripts/main.js&quot;&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>Server.py</strong></p>
  <pre><code>from http.server import HTTPServer,BaseHTTPRequestHandler
  
  HOST = &quot;localhost&quot;
  PORT = 9999
  
  class FeedSpeedServer(BaseHTTPRequestHandler):
  
      def do_GET(self):
  
  
          if self.path == &quot;/&quot;:
              self.path = '/index.html'
          
          try:
              file = open(self.path[1:]).read()
              self.send_response(200)
          except:
              file = &quot;file not found&quot;
              self.send_response(404)
  
          #self.send_header(&quot;content-type&quot;, &quot;text/html&quot;)
          #self.send_header(&quot;content-type&quot;, &quot;text/javascript&quot;)
          #self.send_header(&quot;content-type&quot;, &quot;text/css&quot;)
          self.end_headers()    
          self.wfile.write(bytes(file, 'utf-8'))
  
  httpd = HTTPServer((HOST, PORT), FeedSpeedServer)
  print(&quot;server running...&quot;)
  httpd.serve_forever()
  print(&quot;server Stopped&quot;)
  </code></pre>
  <p><strong>Main.js</strong></p>
  <pre><code>import { FeedsSpeeds } from &quot;./FeedsSpeeds&quot;
  
  let but = document.getElementById(&quot;but&quot;);
  
  let navBar = document.getElementById(&quot;nav&quot;);
  let feedSpeedsBut = navBar.getElementsByTagName(&quot;p&quot;)[0]
  let materialsBut = navBar.getElementsByTagName(&quot;p&quot;)[1]
  let toolBut = navBar.getElementsByTagName(&quot;p&quot;)[2]
  
  feedSpeedsBut.addEventListener(&quot;click&quot;, function(){console.log(&quot;helloworld&quot;)});
  
  materialsBut.addEventListener(&quot;click&quot;, function(){console.log(&quot;hello material world&quot;)});
  
  toolBut.addEventListener(&quot;click&quot;, function(){console.log(&quot;hello tool world&quot;)});
  
  
  //
  
  function handlerEvent() {
    alert('hello');
    console.log(&quot;fired&quot;);
  }
  
  //but.onclick = () =&gt; alert(&quot;hellosies&quot;)
  but.addEventListener(&quot;click&quot;, handlerEvent);
  //but.removeEventListener(&quot;click&quot;, handlerEvent);
  </code></pre>
  <p><strong>Page.js</strong></p>
  <pre><code>export class Page{
      constructor(){
          
      }
  }
  </code></pre>
  <p><strong>FeedsSpeeds.js</strong></p>
  <pre><code>import { Page } from &quot;scripts/Page&quot;;
  
  export class FeedsSpeeds extends Page {
      constructor(){
  
      }
  }
  </code></pre>