9

I have a Django application, which requires several JavaScript files.

In Chrome I get the error "Resource interpreted as Script, but transferred with MIME type text/html".

enter image description here

AFAIK (see 2) in order to fix this problem, I need to configure Django so that JavaScript files are returned with content-type "application/x-javascript".

How can I do this in Django?

UPDATE: I followed the advice by Daniel Roseman and found following solution.

1) Modify urls.py:

urlpatterns = patterns('',
    ...
    url(r'.*\.js$', java_script),
    ...
)

2) Add following function to views.py:

def java_script(request):
    filename = request.path.strip("/")
    data = open(filename, "rb").read()
    return HttpResponse(data, mimetype="application/x-javascript")
Community
  • 1
  • 1
Glory to Russia
  • 17,289
  • 56
  • 182
  • 325
  • possible duplicate of [How to set http headers with different content type](http://stackoverflow.com/questions/10727942/how-to-set-http-headers-with-different-content-type) – rlemon Aug 04 '12 at 19:07
  • Best dupe I could find quickly, but really... you are setting headers and content types in Python. Django has nothing to do with this AFAIK – rlemon Aug 04 '12 at 19:08
  • At http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text someone said "It means that the server is sending an Javascript HTTP response with content-type:text/plain.". I'm using the built-in web server of Django (python manage.py runserver), hence I assume that I have to configure Django's built-in server to fix this problem. – Glory to Russia Aug 04 '12 at 19:21
  • I don't know enough about Python or Django to comment on that technology, but in the end, you need to find a way that when requested, those uri's give a correct header type. If Django has or requires that, ok, if not, what is serving those files? That's the question. – Jared Farrish Aug 04 '12 at 19:22
  • On the same page, someone wrote that "AddType text/javascript .js" would fix the issue on the Apache server (all files with the .js extension would have "text/javascript" content-type). I need something similar for Django's built-in web server. – Glory to Russia Aug 04 '12 at 19:23

8 Answers8

18

I had an issue with Django serving javascript files as text/plain with the included server, which doesn't work too well with ES6 modules. I found out here that you could change file extension associations by placing the following lines in your settings.py:

#settings.py
if DEBUG:
    import mimetypes
    mimetypes.add_type("application/javascript", ".js", True)

and javascript files were now served as application/javascript.

Alexandre Cox
  • 510
  • 3
  • 9
7

I suspect the problem is not what you think it is. What is probably actually happening is that your JS files are not being served at all: instead, the Django error page is being sent. You need to figure out why.

Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
  • This is not what is happening -- this can be easily confirmed by opening the URL of the file in a separate tab, and you would see the full content of the JS file, which means that the file is indeed available. – Zhe Apr 29 '23 at 13:55
1

Expanding on Alexandre's answer using put the below code into settings.py of your main project. After that you will need to clear your browser cache (you can test it by opening an incognito window as well) in order to get the debug panel to appear.

if DEBUG:
    import mimetypes
    mimetypes.add_type("application/javascript", ".js", True)
piephai
  • 11
  • 1
0

Since this doesn't prevent scripts from being interpreted correctly by the browser, why is this a problem? runserver is only for development (not production use), and as such is not a full blown web server.

You should continue to use it in development and when you move to production configure your webserver appropriately for static files.

However, if you absolutely must use the development server to serve static files; see how to serve static files.

Burhan Khalid
  • 169,990
  • 18
  • 245
  • 284
  • 1) This is a problem because my websocket code doesn't work and the only error message, which appears in Chrome's "Network" console is "Uncaught SyntaxError: Unexpected token <", which is - probably - caused by the wrong content type of JavaScript files. 2) I'm using the built-in web server for prototyping purposes only (not in production). – Glory to Russia Aug 04 '12 at 19:41
  • That error most likely has to do with JSON not being returned correctly. – Burhan Khalid Aug 04 '12 at 19:46
  • How can I fix it with least possible effort in Django? – Glory to Russia Aug 04 '12 at 19:54
  • Fix your view that is returning the JSON to make sure it is setting the correct mimetype `application/json`, and not `application/javascript` – Burhan Khalid Aug 04 '12 at 19:55
0

For Django use request context in views :

return render_to_response('success.html', {'object': varobject},context_instance=RequestContext(request))
Bohemian
  • 412,405
  • 93
  • 575
  • 722
Vik Neethan
  • 1
0

I ran into that error today even after adding @piephai s solution to my settings.py. I then noticed that @Daniel Roseman got it right as well: My import paths were wrong, I had to add ".js" to all of them, for example:

import {HttpTool} from "./requests"; became import {HttpTool} from "./requests.js";

Makes sense after thinking about how routes for static files are generated.

kiloton
  • 105
  • 2
  • 10
0

The solution to the problem is describe in the documentation

  • For Windows, you need to edit the registry. Set HKEY_CLASSES_ROOT\.js\Content Type to text/javascript.
AlexElizard
  • 785
  • 4
  • 17
0

The below code has worked for me. I think mime type has been deprecated in the recent django version?

response = HttpResponse("alert('hello')")
content_type="application/x-javascript") return response
kta
  • 19,412
  • 7
  • 65
  • 47