Javascript – Chrome says “Resource interpreted as Stylesheet but transferred with MIME type text/html”

google-chromejavascriptmime-typesnode.jssocket.io

I'm trying to set up a simple chat using node.js (no express) and socket.io. Problem is that Chrome gets stuck on my external includes in the html file, resulting in those files never getting included. I'm including a ccs file, and three javascript files. As suggested in answers to other related questions here on Stackoverflow, I checked my document's MIME type by requiring the mime module and using the mime.lookup(url), which says 'text/html'. I specifically set the returning header to 'Content-Type' : 'text/html' and even played around with setting it as 'text/css' and 'text/javascript' to no avail. As of now I have no idea what to try next. Please help!

chat.html:

<!DOCTYPE html>
    <html>
        <head>
        <title>CHAT</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link type="text/css" rel="stylesheet" href="css/style.css" /> <!-- First line that Chrome complains about -->
        <script type="text/javascript" src="/socket.io/socket.io.js"></script> <!-- Second line that Chrome complains about -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
        <script type="text/javascript" src="chatClient.js"></script>
                    </head>
        <body>
        <h1>this shall be a chat</h1>
        </body>
    </html>

chatClient.js:

var socket = io.connect('http://localhost');

        var chatBox = document.createElement('div');

        chatBox.id = 'chatBox';

        socket.on('server', function (data) {
        console.log('Server says: ', data.message);

        socket.emit('client', { clientMessage : 'this is all I have to say, right now!' });
});

chatServer.js:

var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs'),
mime = require('mime');

var url = __dirname + '/chat.html';
var mimeType = mime.lookup(url);

console.log(mimeType);

app.listen(8080);

function handler (req, res) {
    fs.readFile(url, function (err, data) {
    if (err) {
        res.writeHead(500);
        return res.end('Error loading chat');
    }

    res.setHeader('Content-Type', mimeType); // Sets the header to 'text/html'
    res.writeHead(200);
    res.end(data);
    });
}

io.sockets.on('connection', function (socket) {
    console.log('CHAT ONLINE');
    socket.emit('server', { message: 'hello world' });

    socket.on('client', function (data) {
    console.log('Client says: ', data.clientMessage);
    });
});

This is my absolute first time posting here so please let me know if there's anything more I should have included to assist in your helping me with this problem.

Best Answer

You're setting mimeType during initialization based on one file that you might be sending out, rather than setting it based on the file that you're actually sending out. That will cause any non-HTML files that you might send (e.g CSS or JS files) to go out with a misleading Content-Type header. You need to do the check inside your request handler.

Related Topic