title: Resource was blocked due to MIME type mismatch
body: <p>I have been getting this error of <code>The resource from “[URL and name of file]” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).</code> for <em>all</em> of my CSS and Javascript files. </p>
  
  <p>The setup I currently have is a node.js server using Express and Express-Handlebars for routing and templates. I'm sure the issue is down to my routing of files which would have requests of dealing with routes like <code>/movies/:id</code> or <code>/search/query:</code>. I have kinda fixed the issue by creating two links to CSS and Javascript files in my <code>main.hbs</code> file (The one which is the default main template), one with a link from <code>/</code> and another for <code>/something/something</code>. Terrible practice I know. But up until now, it worked.</p>
  
  <p>But this is why I am asking for help in solving the MIME type mismatch error once and for all. Because when I have uploaded it to my Digital Ocean server, it won't work at all. And I have no clue on how to fix it.</p>
  
  <p>My file structure is as follows:</p>
  
  <pre><code>/
      views/
          css/
          js/
          layouts/
              main.hbs
      index.js
  </code></pre>
  
  <p>In index.js, I have the code to setup handlebars and some code managing CSS and Javascript files.</p>
  
  <pre><code>app.engine('.hbs', exphbs({
      defaultLayout: 'main',
      extname: '.hbs',
      layoutDir: path.join(__dirname, 'views/layouts')
  }));
  
  app.set('view engine', '.hbs');
  app.set('views', path.join(__dirname, 'views'));
  app.use(express.static(__dirname + '/views'));
  </code></pre>
  
  <p>An example of an route would be</p>
  
  <pre><code>app.get('/search/:query', (request, response) =&gt; {
      // Code goes here
  });
  </code></pre>
  
  <p>I'm genuinely stuck on what to do. I feel like I have been to all corners of the internet and I cant find any solution to my issue.</p>
  
  <p>Any help would be appreciated.</p>