title: Vue.js and django MIME Type Issue
body: <p>I'm deploying to heroku a vue.js app nested inside a django project. I followed this guide verbatim</p>
  <p><a href="https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70" rel="nofollow noreferrer">https://medium.com/@williamgnlee/simple-integrated-django-vue-js-web-application-configured-for-heroku-deployment-c4bd2b37aa70</a></p>
  <p>Build to heroku succeeds, and the website loads -- the API portion of the site in question, for example, is fully viewable.</p>
  <p><a href="https://heseltime.herokuapp.com/api_example/" rel="nofollow noreferrer">https://heseltime.herokuapp.com/api_example/</a></p>
  <p>But I am not able to access the vue.js app because there is a MIME type issue. Error log:</p>
  <pre><code>The resource from “https://heseltime.herokuapp.com/static/css/app.48175cc56e52e020bf178616c0977374.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
  
  </code></pre>
  <p><a href="https://heseltime.herokuapp.com/" rel="nofollow noreferrer">https://heseltime.herokuapp.com/</a> is where the vue.js is supposed to be, as per urls.py in my django project</p>
  <pre><code>from django.contrib import admin
  from django.urls import path, include
  
  from django.views.generic import TemplateView
  from django.conf.urls import url
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      url(r'^$', TemplateView.as_view(template_name='index.html')),
      path('api_example', include('api_example.urls')),
  ]
  
  
  </code></pre>
  <p>When I ssh into the heroku side I find the files in the right staticfiles location as per my settings.py from django</p>
  <pre><code># https://docs.djangoproject.com/en/3.1/howto/static-files/
  
  STATIC_URL = '/static/'
  
  STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'dist/static'),
  ]
  
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
  
  CORS_ORIGIN_ALLOW_ALL = False 
  
  </code></pre>
  <p>The html of the website is loaded as</p>
  <pre><code>
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=utf-8&gt;
      &lt;meta name=viewport content=&quot;width=device-width,initial-scale=1&quot;&gt;
      &lt;title&gt;heseltime&lt;/title&gt;
      &lt;link href=/static/css/app.48175cc56e52e020bf178616c0977374.css rel=stylesheet&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=app&gt;&lt;/div&gt;
      &lt;script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js&gt;&lt;/script&gt;
      &lt;script type=text/javascript src=/static/js/vendor.7e9567d6dec21d8821f2.js&gt;&lt;/script&gt;
      &lt;script type=text/javascript src=/static/js/app.f5b30ee15ad2f9646708.js&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p>This looks good to me (?) -- Could this be a CORSHeaders issue?</p>